Tableless div problems

[icb01co2]

Hi All,

I am new to tabless div development and I have a few questions that maybe you can help me with. Ok, first off how do i render a div below a div that has absolute positioning?

For example:

html:

<div class = "top"> /* text */ </div>
<div class = "bottom"> /* bottom text */ </div>

css:

.top
{
position:absolute;
top: 200px;
}


Ok, so I want the bottom div to be rendered underneath the top div. Problem is that it renders it behinf the top div. One way around this would be to set the absolute position of the bottom div to below the top one. Although I will never know how much text is in the top div because the info will come from a dynamic db so i cant give an accurate position to the bottom div.

Second problem I have is when i have two divs side by side like table layout but i want them to both be the same height.

for example if i did this:

<table>
<tr>
<td class = "blue"> This side blue </td>
<td class = "red"> This side red </td>
</tr>
</table>

Ok, so in this situation if i had a load of text in the red td the blue td will also be the same height.

With two divs set at absolute positions next to each other, when the blue side fills up its height will be longer than the red side. Hence it will look lob sided.

I may not be explaining this two well but i hope it makes sense.
Chris.

[speed]

For question 1 I would not use absolute positioning, but then I never use absolute positioning, instead I would use margin-top: 200px on .top, it should get the same effect depending on the rest of the layout.

I know this doesn't exactly answer your question, but with an unknown amount of text being present within .top it's the method I would/do use.

For question 2 http://alistapart.com/articles/fauxcolumns/ explains it quite well, in truth unless you fix the height, the 2 columns really won't be the same height but they will look it and that is all that matters.

[bj]

Position absolute takes that box out of the flow of the document. This means it will always be on top of whatever else is IN the flow. The flow starts on top and works down. So simply take the position absolute off that div and start your next div- it will automatically go underneath it.

example--
.top {
width: 100%;
}
.bottom {
width: 100%;
}

and the html the same way you showed it.

It's also best cross browser to learn to use float layouts. For info and layouts see Kickass WebGeek CSS Resources.