2 Columns Div for Ie8 and Ie7

2 columns div for ie8 and ie7

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.

Using multiple-class selectors in IE7 and IE8

You want to make sure and use a doc type so you do not render in quirks mode. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
.column {
  float: left;
  display: block;
  margin-right: 20px;
  width: 60px;
  border: 1px solid;
}
.two.column {
  width: 140px;
}
.three.column {
  width: 220px;
}
.four.column {
  width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>

3 column output for IE 8 using CSS

CSS3 columns are not supprted in IE8. You will be able to do this using divs however this will only be effective if your content is static.

For example:

<div style="overflow:hidden;">
    <div style="float:left; width:33%;">first third of content</div>
    <div style="float:left; width:33%;">second third of content</div>
    <div style="float:left; width:33%;">third third of content</div>
</div>

For dynamic content you will have to use javascript. I've came across this jQuery plugin online - it should do what you need.

$('#mydiv').columnize({ width: 200 , columns: 3 });

css: two columns of divs

<style type="text/css">
#black {height:600px;width:500px;border:2px solid #000000;}
#black div{height:80px;width:150px;margin-top:20px;}
.green {border:2px solid #009900;float:left;margin-left:60px;}
.red{border: 2px solid #FF0000;float:right;margin-right:60px;}
</style>

   <div id="black">
        <div class="green"></div> <div class="red"></div>
        <div class="green"></div> <div class="red"></div>
        <div class="green"></div> <div class="red"></div>
        <div class="green"></div> <div class="red"></div>
   </div>

IE 7 and IE 8 do not render 2 consequent divs with float:left on the same line if there is a table in one of the DIVs

As scunliffe mentioned in his comment making this html transitional or strict xhtml solves the issue.

Dual Column Layout in CSS with dynamic height in IE

Maybe this resource will be of help to you:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Since you want to have only 2 columns,
have a look at the given example here:

http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Kind regards, mtness.

Equivalent of div display inline-block for IE8, IE7 and older browsers

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

Here is, to my knowledge, the best way to get a cross-browser display:inline-block:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Foundation 4 grid support for Internet Explorer 8

There is partial support for IE in Foundation 4 that can be found on the Support Page. They also mention a gist that allows better grid implementation on ie8.

Maybe this can be improved by switching out Zepto for jQuery? Also, you can always use foundation 3.2.5 which has better ie support. See the F3 Support Docs. It says there is IE 8+ support out of the box, without modifications, but no mention of IE 7 or below.

Two column layout (one optional) without the use of margins

Assuming equal height columns are desirable, this is a nice method.

Firstly, make sure you add a doctype as the first line:

<!DOCTYPE html>

Otherwise you get Quirks Mode = bad, bad, bad.

Live Demo
Live Demo (exact same code with right div removed)

This will work in every modern browser and IE8. It won't work in IE7 without some crazy hacks.

Do you need IE7 support?

<!DOCTYPE html>
<html>

<head>
<style>
  #header {
    border: 1px solid green;
  }
  #left {
    border: 1px solid red;
  }
  #right {
    border: 1px solid blue;
    width: 300px;
  }
  #footer {
    border: 1px solid green;
  }
  #container {
    display: table
  }
  #left, #right {
    display: table-cell
  }
</style>
</head>

<body>
  <div id="body">

    <div id="header">
      <p>Header</p>
    </div>

    <div id="container">
        <div id="left">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

        <div id="right">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>

    <div id="footer">
      <p>Footer</p>
    </div>

  </div>
</body>

</html>

column are full width in IE 8 - Css bootstrap

Based on the solution in the thread : Must Bootstrap container elements include row elements?, your markup should be :

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;"> </div>
        <div class="col-sm-4" style="background:green;"> </div>
        <div class="col-sm-4" style="background:blue;"> </div>
    </div>
</div>

and use this CSS to achieve it in IE8:

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

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

here is the working demo

The .row class is not required inside a .container, but if you include then, container > row is the order not row > container (which you code)!

EDIT

It might be worth noting that respond.js only works for local files. So if you have got css files of bootstrap from CDN for your website on IE8, it won't work, instead, try with a local copy of bootstrap.css

Internet Explorer 8 and Respond.js
Beware of the following caveats when using Respond.js in your
development and production environments for Internet Explorer 8.
Respond.js and cross-domain CSS
Using Respond.js with CSS hosted on a different (sub)domain (for
example, on a CDN) requires some additional setup. See the Respond.js
docs for details.
Respond.js and file://
Due to browser security rules, Respond.js doesn't work with pages
viewed via the file:// protocol (like when opening a local HTML file).
To test responsive features in IE8, view your pages over HTTP(S). See
the Respond.js docs for details.
Respond.js and @import
Respond.js doesn't work with CSS that's referenced via @import. In
particular, some Drupal configurations are known to use @import. See
the Respond.js docs for details.
IE Compatibility modes
Bootstrap is not supported in the old Internet Explorer compatibility
modes. To be sure you're using the latest rendering mode for IE,
consider including the appropriate tag in your pages:

Source : Getbootstrap

2 Columns Div for Ie8 and Ie7