I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfiddle.net/za5X7/
My goal is to have #sitelatestposts occupy 55% of the width space and let #siteinfos take up the remaining percentage.
<div class="homepagediv">
<div class="panel-grid-cell" id="sitelatestposts">
<h1 class="blogtitle">Recent posts</h1>
<ul>
<li><a href=#><h5>Title 1</h5><p>Lorem ipsum</p></a></li>
<li><a href=#><h5>Title 2</h5><p>Lorem ipsum</p></a></li>
<li><a href=#><h5>Title 3</h5><p>Lorem ipsum</p></a></li>
</ul>
</div>
<div class="panel-grid-cell" id="siteinfos">
<h1>About the author</h1>
<p>Contact 555-215-5548</p>
<p>Lorem ipsum</p>
</div>
</div>
CSS:
.homepagediv {
zoom: 1;
width: 100%;
}
.homepagediv h1, .homepagediv h2, .homepagediv h3, .homepagediv h4, .homepagediv h5, .homepagediv h6 {
clear: none;
}
.panel-grid-cell {
margin: 0 auto;
padding: 0;
float: left;
}
.blogtitle {
padding: 0 0 0 10px;
margin:0.5em 0 22px 0;
}
#sitelatestposts {
width: 55%;
}
#sitelatestposts ul {
padding: 0;
list-style-type: none;
}
#sitelatestposts h5 {
font-size: 14px;
}
#siteinfos {
margin-right:10px;
}
If you have any suggestions on how to resolve this issue, please share! Thank you!