Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
CSS trouble with IE
Hi. I’m looking for someone to shed some light on what might be happening in the following situation in IE browsers.
I have 2 block elements(both divs – content and sidebar) inside a container(also div). I want my content div to be wider. If I set the width on my content div however IE pushes it below my sidebar(the other div). I’ve read about how IE has issues with certain elements having “layout” etc. as part of its horribleness and this is likely the cause of my problem in some way. So here is the question, what is the best practice for building layouts in IE that accomplishes what I described above? Surely there must be some way to change the width of a div without breaking the layout. Please help. Thanks.
Offline
Re: CSS trouble with IE
Floating divs works as fine in IE 5.5+ (and up) as in other browsers, minus there are some minor bugs, like double margin, if margin is used but those all can be fixed easily. In example if you have a div layout like:
<div id="container">
<div id="left">
<!--
this floats to left
or you can also put it to right side by floating it to right, what ever you want.
-->
</div>
<div id="right">
<!--
this floats to right
or you can also put it to left side by floating it to left, what ever you want.
-->
</div>
</div>And then some CSS, commented also to give tips:
* {
padding: 0; /* browser defaults go off */
margin: 0;
}
#container {
overflow: hidden; /* clears float and removes exact match width bug, if floating elements match container elements width */
width: 600px;
}
#left,#right {
display: inline; /* inline removes IE's double margin bug */
}
#left {
width: 400px;
float: left;
}
#right {
width: 195px;
float: right;
}End note: there are multiple different ways to build columns, float elements and clear floats. That is just one example.
Offline
Re: CSS trouble with IE
Thanks Gocom! This was very helpful. I’ve played with floats and nearly have them working except for getting them to not wrap around each other. In other words, make each floated element as if it had unlimited height. I’ve been searching the web for this but haven’t found anything that has worked for me so far. Any ideas? Thanks again though, this forum is great. Cheers.
Offline
Re: CSS trouble with IE
fungi wrote:
Thanks Gocom! This was very helpful. I’ve played with floats and nearly have them working except for getting them to not wrap around each other. In other words, make each floated element as if it had unlimited height. I’ve been searching the web for this but haven’t found anything that has worked for me so far. Any ideas? Thanks again though, this forum is great. Cheers.
No problem :)
Do you mean that they should have same height? If there isn’t anykind of background for them, you can use clearing methods. Other nice method is faux columns. In example you place the column background for the containing element, and that way you can get that look that you are hoping for. There are plenty methods for that too.
Or are you meaning that the float exceeds the container, and doesn’t push it down? Well, that is because you need to always clear floating elements. As I descriped in my code example. One way is that overflow: hidden; or other is to use clear: both below floating elements, either with after etc. pseudo or by adding elements especially for that job.
Last edited by Gocom (2008-12-04 12:24:04)
Offline
Pages: 1