Forum Moderators: not2easy

Message Too Old, No Replies

IE6, Nested Div's & CSS

         

scoobyd

8:06 pm on Jun 17, 2003 (gmt 0)

10+ Year Member



I'm hoping that I'm posting this to the correct forum. I am having a problem with nested Div tags that have styles applied in IE, they layout fine in Mozilla though. Below is a code snippet of what I have:

<div class="inline">
<div class="fieldsetTitle">Title</div>
<div class="fieldsetBackground">
Some elements in here
</div>
</div>

<div class="inline">
<div class="fieldsetTitle">2nd Title</div>
<div class="fieldsetBackground">
Some more elements in here
</div>
</div>

.fieldsetTitle {
background-color: #C1C8D2;
font-color: black;
font-size: 10pt;
font-weight: bold;
text-align: left;
padding: 0.5em;
}

.fieldsetBackground {
background-color: #F3F4F7;
padding: 1em;
}

div.inline {
display: inline;
vertical-align: top;
border: 0;
}

In IE, instead of having two boxes side by side, they stretch to the width of the entire page, one below the other. I have tried several other display parameters and I can't seem to get this to work. Does anyone have any sort of suggestion that could maybe put me on to the right path?

drbrain

8:42 pm on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In which Mozilla? Mine shows it exactly as IE

I think you want something like

.inline {
float: left;
width: 49.9%;
}

scoobyd

8:50 pm on Jun 17, 2003 (gmt 0)

10+ Year Member



That works great! One problem though...I now need that div to be centered horizontally on the page. I have a 'center' tag encapsulating the entire page, but because I now have 'float:left' in there, it ignores my center tag. Any thoughts on that?

scoobyd

8:53 pm on Jun 17, 2003 (gmt 0)

10+ Year Member



And one other thing, though the float:left works when there is only two content boxes ( one beside the other ). I actually have 3 - 4 boxes on each page. Some have 1 box, a line break, then the final two boxes beside each other. By using the float left I would have to enter multiple line breaks just to get them underneath the initial box.

drbrain

9:31 pm on Jun 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Looks like you might want to move on to absolute or relative positioning. Check out the library for more information on that.

Why are you after a particular look? Creating flow-based layout is much friendlier to you and your readers...