I recently implemented a two column layout on my WordPress site, and to ensure it remains responsive when the browser width is reduced, I utilized this specific solution.
While the solution generally works well, I encountered an issue where the content in the main container is pushed down. If I use float:left on both containers, this issue doesn't occur, but I require a different approach to ensure the right container fills the width.
My attempt to address this involved setting the right container to position:relative and the h3 tag within it to position:absolute. While this did bring the content to the top, it introduced other complications.
What could be causing this problem, and what steps can I take to resolve it?
______________________________
|| || ||
|| SB || ||
|| || ||
|| || ||
|| || Title ||
|| || Foo text ||
|| || ||
|| || ||
------------------------------
html:
<div id="main">
<div id="sub-menu">
//content
</div>
<div id="post-24" class="post post-add">
//content
</div>
</div>
css:
#main {
padding-left: 5px;
margin-left: 22px;
margin-top: 28px;
padding-right: 30px;
height: 100%;
}
#sub-menu {
float: left;
padding: 20px 30px;
width: 220px;
height: 400px;
margin-right: 30px;
border-radius: 3px;
}
.post {
padding: 28px;
padding-bottom: 5px;
min-height: 400px;
margin-left: 320px;
}