3 columns layout - ok in ff, safari but not ie
newbie
Posted: Tue, 2008-05-13 08:38
hello all,
first i'd like to say i've spent the last afternoon looking for an answer but couldn't find it.
i have a valid xhtml transitional page which has 3 columns. one on the left, one in the middle and one on the right. the column on the left is 180px, middle is 450px and the right one is 180px as well. basically what i have in css is like this:
.leftcol { float: left; width: 180px; margin: 0 30px 16px 0; }
.middcol { float: left; width: 450px; margin: 0 30px 16px 0; }
.leftlast { float: right; margin: 0; }and in the page is like this:
<div class="leftcol">
some text...
</div>
<div class="middcol">
some text with some images...
</div>
<div class="leftcol leftlast">
some text...
</div>it displays ok in all browsers but problem begins when i insert in the middle column an image that's wider than 450 pixels. in ff and safari that image just stretches over the right column (which is just what i want) but in ie, the middle column and the right one, go down, under the left column because that's where there's place for both columns. i don't want this. i want ie to do basically the same thing as ff and safari.
how do i do it?
thank you in advance,
krko
newbie
Posts: 4
Joined: 2008-05-13
please ignore this comment
Posted: Tue, 2008-05-13 08:47
please ignore this comment i accidentally wrote it and i couldn't find a way to del it. the question however remains...
newbie
Posts: 4
Joined: 2008-05-13
anyone?
Posted: Wed, 2008-05-14 19:28
anyone?
Enthusiast
Posts: 201
Joined: 2008-03-16
I can't imagine why you
Posted: Wed, 2008-05-14 20:01
I can't imagine why you would want to force something wider than your set width and expect every browser behaves like you would want them to. Ever thought about that IE interprets your error correct while the rest tries to correct your error and fail?
newbie
Posts: 4
Joined: 2008-05-13
it doesn't matter if ie
Posted: Fri, 2008-05-16 11:19
it doesn't matter if ie interprets my error correctly and other browsers fail or vice versa. it's not a browser contest... i have a problem and i'd like to solve it...
i'm asking this question because i have huge amounts of info to transfer into the new design (from another site) and i don't have time to resize and rearrange the content. there must be a way to make ie display a div over/under another div and z-index doesn't work.
Moderator
Posts: 5645
Joined: 2004-06-25
Location: Dallas
The problem is that IE≤7
Posted: Sat, 2008-05-17 18:09
The problem is that IE≤7 has a WAD bug called hasLayout. Once layout is triggered, a container will expand to enclose its content. Period. Full stop. That's what you're bumping into. Modern browsers correctly allow the image to overflow; IE doesn't and won't. It's no help now, but MSFT promises IE8 will not have hasLayout.
Once you're aware of the issue, you tend not to allow over-sized content. If there's a fix, I don't know it off-hand. All I can suggest is that you scale back the image 'til it fits. You could use a conditional comment to feed IE special instructions restricting the width.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.