2 Columns Div For Ie8 And Ie7

February 05, 2023 Post a Comment

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 {

Solution 1:

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.

Solution 2:

<style type="text/css">

#main {
margin: auto;padding: 0px;width: 100%;}
#mainleft {
float: left; width: 100%; clear: none; background-color: #993300;
}
#mainright {
    float: right;
    width: 30%;
    clear: none;
    position: relative;
    background-color: #0033FF;
}

</style>
</head>
<body>
<div id="main"><div id="mainleft"><div id="mainright"></div>
</div>
</div>
</body>

Solution 3:

Make the mainContent 69%

And remove the container display.

Baca Juga

Solution 4:

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

Solution 5:

Just to extend the possibilities for others who get here: use display: table-cell;, works pretty well and has no rounding errors. Example:

HTML

<div class="table">
    <div class="cell">textytext</div>
    <div class="cell">textytext</div>
</div>

CSS

.table {
    display: table;
    width: 100%;
}

.table .cell {
    display: table-cell;
    text-align: left;
    vertical-align: top;
}

jsfiddle

To add some spacing you can apply left-/right-padding to the cell, it won't interfere with the layout, plus you can easily make it a 3-column text by adding a cell. This only works for IE8, since the thread is about IE8 and 7, but I think it's a really nice solution.

Html5 Guru