Why are these divs not staying next to each other when resizing the browser window?

Question

I have a problem with 2 of my divs that are not staying next to each other when resizing the browser window. When the window is wide, the divs sit well next to each other, but when you resize the window to narrower resolution, the div on the right goes under the one on the left: http://jsfiddle.net/za5X7/

I would like to have #sitelatestposts covering 55% of the width space and have #siteinfos covering the rest.

<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;
}

Do you know how to fix this? Thanks!

Answer 1

Add

width:35%;

to #siteinfos{}

This should equal 100% (with 55% going to #sitelatestposts)

http://jsfiddle.net/za5X7/5/

Answer 2

Just specify your #siteinfos width, and it will work.

In this case, if you specify 55% for #sitelatestposts, you can specify like 35% for #siteinfos (Together this will equal 90%).

When you do this, you can keep your margin-right.

However, if you specify 45% for #siteinfos AND keep your margin-right, this will be more than 100% (100% + 10px), so they won't appear next to each other.

Answer 3

i just removed the margin-right of #siteinfos and set the width to 45%.

#siteinfos {
width:45%;
margin-right:0; }

the margin-right may cause a line-break and since it is a float:left; element, i see no reason for leaving a margin-right in it, if you still need it, try setting a padding-right in the elemnts inside of that div, so it will always keep the right size and alignment.

EDIT: FIDDLE HERE