2 columns div for ie8 and ie7

Question

i want a row with 2 cells, the row and the 2 cellsmust be in percent. i had tried to do it like this:

#container
{    
    width: 100%;
    display:inline-table; 
} 
#sidebar1 
{
    float: left; 
    width: 30%;
}

#mainContent  
{
    float: left; 
    width: 70%;
}  



<div id="container">
  <div id="sidebar1">
             <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" EnableCreateNewFolder="False"
                EnableOpenFile="False" Skin="WebBlue" Width="" ExplorerMode="FileTree" TreePaneWidth="">
                <Configuration SearchPatterns="*.*" ViewPaths="/" />
            </telerik:RadFileExplorer>
  </div>
  <div id="mainContent">  
            <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" Skin="WebBlue" />
  </div>
</div>

but it doesnt display correctl, when i resize, the right columns go down the first column.

Answer 1

Make the mainContent 69%

And remove the container display.

Answer 2

Hi Umetzu

I have just copied and paste this code from a project I am working on, should help

main {

margin: auto;
padding: 0px;
width: 100%;

}

mainleft {

float: left; width: 70%; clear: none;

mainright {

float: right; width: 30%; clear: none; position: relative;

Answer 3

Because of the way the CSS box model works, having 2 boxes next to each other whose combined width adds up to 100% (or the width of its container) will cause one box to be pushed down below the other in many cases.

You should make sure you have no margins, padding, or borders on your two column elements. This will be added to the width of your elements, in addition to the 70%/30% widths you have for your columns.

UPDATE: As ricebowl mentioned in the comments, many browsers have rounding errors that result in more than 100% width being rendered. This can be seen on PositionIsEverything's demo page. I've updated my answer to take this into consideration.

I've also updated my solution to include a fix for the column overflow problem you mentioned. Now, if the content is too large for the columns, a scrollbar will appear. If you don't want scrollbars, you can use overflow-x: hidden instead, however this will cut content off.

/* Reset all margin, padding, border to baseline */
#container, #sidebar1, #mainContent {
    margin: 0px; 
    padding: 0px; 
    border: 0px;
}

/* Apply styles for column layout */
#container { 
    width: 100%; 
    overflow: auto
}
#sidebar1 {
    width: 29%; 
    float: left;
    overflow-x: auto
}
#mainContent { 
    width: 69%; 
    float: right;
    overflow-x: auto
}

A live demo of this can be seen here: http://jsbin.com/eyise

I just tested this out in Firefox 3.5, IE7, IE8, & Google Chrome 3. It works identically in all three browsers. I would avoid using display: inline-table;. In my experience, I've never had very much luck using it consistently across all browsers.

If you need to add a border, do so using faux columns on the container element. And since you're obviously doing a liquid layout, you may also want to read this article on liquid faux columns.