CODEWITHSUNDEEP
htmlcsspositioning
user1342299
user1342299

Reputation: 31

Stacking expanding DIVs

I'm trying to create a page with three columns. The outer columns are straightforward. However, the middle column has a column-wide div at the top that needs to expand vertically to suit content, followed by two other divs that need to sit side by side. My problem is getting the two lower divs to move downwards as the top div expands.

The core code for the centre column is:

// the top column-wide div
echo '<div id="centre">';
// echo some variable length text
echo '</div>';

// the bottom left div
echo '<div id="centreleft">';
// echo some variable length text
echo '</div>';

// the bottom right div
echo '<div id="centreright">';
// echo some variable length text
echo '</div>';

With the top div of fixed height, the following css works:

#centre {
    position: absolute;
    left: 230px;
    top: 30px;
    width: 690px;
    overflow: visible;
}
#centreleft {
    position: absolute;
    left: 230px;
    top: 355px;
    width: 335px;
    overflow: visible;
}
#centreright {
    position: absolute;
    left: 595px;
    top: 355px;
    width: 320px;
    overflow: visible;
}

What do I need to change to enable the top div to be of variable height? I've tried changing the positions of the lower divs to relative, but then everything is written to the top left of screen.

Upvotes: 0

Views: 110

Answers (3)

CChoma
CChoma

Reputation: 1154

I concur. Float those babies instead of absolute positioning and clear the second div to ensure it falls below the first.

Upvotes: 0

Michał Miszczyszyn
Michał Miszczyszyn

Reputation: 12721

And why do you use position:absolute anyway?

See: http://jsfiddle.net/vFEux/

And use margins to move containers more from each other.

Upvotes: 0

Madbreaks
Madbreaks

Reputation: 19549

Don't use absolute positioning. Float the lower divs or use display:inline-block;, etc. Absolute position means "keep them where they are", it removes them from the document flow and they're anchored in place.

More here: https://developer.mozilla.org/en/CSS/position#Absolute_positioning

Cheers

Upvotes: 1

Related Questions