CODEWITHSUNDEEP
cssinternet-explorerhtmlpositioning
Garrett
Garrett

Reputation: 497

IE forcing floating div to bottom despite fixed width container?

I've been working on http://healthimpactnews.com and I need to fix this issue asap.

For some reason, IE, and IE only, squeezes the right-hand sidebar down below the other divs even though all the div columns are floating and within a fixed width container. My browsers create a horizontal scroll bar when the are sized down, but IE just forces the div down, instead.

Anyone know why?

Upvotes: 1

Views: 674

Answers (4)

Caspar Kleijne
Caspar Kleijne

Reputation: 21864

The div with class ct_w is 1000px width;

The first child of that (ct) is also 1000px width,

so it pushes the second child ct_c3 (the right bar) away... (down)

solution:

completely remove the width property of the div with class ct

.ct {
    margin: 0px auto;
    width: 1000px; /** <--- remove this **/
}

enter image description here

Upvotes: 1

RussellUresti
RussellUresti

Reputation: 6221

Yes, your container, "ct_w", has a width of 1000px; your left column, "ct" also has a width of 1000px. There is no room left there for your sidebar, "ct_c3". The other browsers are actually being nice by rendering the sidebar where it is. In fact, they're only doing that because you didn't clear your floats, so they don't understand the box model of ct_w.

Use a clearfix on ct_w, set the width of ct to 750px (or 749px for IE7), and make ct float left, then you will see the layout you're looking for.

Upvotes: 1

Marnix
Marnix

Reputation: 6547

The following seems to work as well:

.ct
{
    float:left;
    width:750px;
}

And remove the margin part, because it is not needed when floating the toolbar next to it.

Upvotes: 0

sankargorthi
sankargorthi

Reputation: 369

Try setting the following:

.ct_w {
    ...
    float: left;
    width: 750px;
    ...
}

.ct_c3 {
   ...
   float: right;
   ...
}

Upvotes: 0

Related Questions