Shouldn't 'position' in a selector respect the DIV it's in?

[sbt1]

I'm trying to line up several DIVs inside an overall DIV, 5 in a row.

If I create the overall DIV, with width=100%, then try to add the inner DIVs with relative positioning (to get them to line up next to each other), they seem to respect the screen instead of the outer DIV they're inside.

Does that sound right, and is there any way to make relative positioning respect the DIV the items are inside of instead of the actual screen? Trying like heck to stay table-free :-)

[katana_one]

Is the overall DIV the top-most level DIV tag? If so, then when you set it to 100% it is screen width - and the nested DIVs are respecting the width of the parent.

Maybe post a bit of the CSS and HTML you are using would help.

[sbt1]

The width isn't the issue, it's the fact that the top of the 'inside' DIVs are being positioned relative to the screen instead of the top level DIV.

Outer DIV:
#block {
width:100%;
background:cyan;
}

Inner DIV (two of 5):
#col1 {
width:180;
background:silver;
border:solid 1px black;
color:white;
font-family:arial;
font-size:10pt;
margin: 2px;
position:relative; left: 5px; top: 0px
}
#col2 {
width:180;
background:silver;
border:solid 1px black;
color:white;
font-family: arial;
font-size:10pt;
margin:2px;
position:relative; left: 192px; top: -1000px
}
(objective is to have col1-col5 lined up at the top of the #block DIV)

HTML:
<HR color=darkblue>
<BR>
<DIV id='block'>
<DIV id='col1'>
<P id='date'>Monday Jul. 19 2004</P>
<P id='appt'>some text</P>
</DIV>

<DIV id='col2'>
<P id='date'>Tuesday Jul. 20 2004</P>
<P id='appt'>some text</P>
</DIV>
</DIV>

[Rambo Tribble]

Give your outer div a position. Positioned elements are positioned relative to their first containing element that is positioned, which defaults to the body if no other containing element is positioned.

[katana_one]

The firt DIV (block) is set to 100% - that is 100% of the browser window width, since it is the top-most level element.

Runnin IE6 on my PC, I see column 1 line up as you have specified: 5px to the left of its parent, with a 2px margin. Column 2 does not appear on screen because you have its top position set to -1000px, which is way off the top of the screen.

[edited by: katana_one at 1:30 pm (utc) on July 22, 2004]

[createErrorMsg]

Try adding...
position: relative;
...to the wrapper <div>. Positioned elements position relative to their closest positioned containing block. If the wrapper <div> is not positioned, the positioned elements look beyond it for a box to contain them, usually the html element.

<added>
(since Rambo beat me to the punch I feel like I have to contribute something new :))

You might be better off floating these divs, rather than trying to position them. As long as their added width does not exceed the width of the main <div>, floating will be fine. If the width of the main <div> shrinks for some reason, the floated elements will wrap, whereas positioned elements will simple disappear off screen. To float them, set the main div to...

#main {
float: left;
width: 100%;
}

...then add float: left to each of the column <div>s. Make sure you give every floated element a width and drop all the positioning rules.

Also, keep in mind that 5 180px wide <divs> take up 900 px of screen space, plus any margins or padding needed to make it look good...that's a really wide page. You'd have to be certain that nearly ALL of your users have screen resolutions above 800X600 to safely pull that off.
</added>

[katana_one]

createErrorMsg:
I was going to suggest the same float: left idea, but then I thought this might be a calendar or schedule of events of some sort. If that is the case, I would stick to positioned elements.

[sbt1]

It works, almost perfectly.

The only problem now is, if one of the columns is long enough for a subsequent column to fall underneath, it's doing that instead of only having 5 columns across.

Yes it is a scheduling application but column length isn't a problem and does not need to be consistent, however I can't have Friday below Thursday if Wednesday happens to be a much longer column.

[createErrorMsg]

Longer or wider? WHich option did you use, position:relative or float:left?

I can't imagine how length would make a difference if all 5 divs line up across the page. It's probably a width issue. Try splitting the page up by percentages. I personally don't like using relative column widths, but it may be the only way to guarantee that, no matter how big the browser window is, all five columns remain on the same horizontal plane. Otherwise, set the main div with a specific width (900px rather than 100%) and make sure your column widths add up to exactly (or slightly less than) that amount.

[sbt1]

Works fine now!

Using the float:left version.

Found out that only the first row of 5 had the outer DIV defined, I didn't figure that out until I colored it a different color.

So then fixed it so all rows have the outer DIV, and it's working great.

Thanks to all for your help!