...

View Full Version : How to make box expand without overlay as content expands



TopBuyPC
06-15-2010, 01:18 AM
Hello all,
I am very new to CSS and have a bit of an issue although I am pretty sure this is an easy fix. I have a website with the following CSS

#container {
position: center;
width: 954px;
height: auto;
}

#leftb {
padding: 5;
position: absolute;
left: 0;
height: auto;
width: 234px;
margin-top: 145px;
text-align: left;
}


#leftb .nav {
padding: 5;
position: absolute;
width: 234px;
left: 0;
background-color: #DCE6FB;
margin-top: 24px;
text-align: left;
}

#leftb .navbg {
padding: 5;
position: absolute;
width: 234px;
background-color: #184684;
font-weight: bold;
color: #FFFFFF;
left: 0;
text-align: left;
}


#leftb .mlist {
padding: 5;
position: absolute;
width: 234px;
left: 0;
background-color: #DCE6FB;
margin-top: 24px;
text-align: left;
}

#leftb .mlistbg {
padding: 5;
position: absolute;
width: 234px;
background-color: #184684;
font-weight: bold;
color: #FFFFFF;
left: 0;
text-align: left;
}

and the html is here http://topbuypc.com/index.php?s=config

I am trying to get the mailing list right under the navigation, and when the navigation expands with more links I would like the mailing list to move down with it. I can position the mailing list with margin-top: #px; but then I would have to change the number everytime I add more links to the navigation box. Please help, thanks everyone!

Bar2aYunie
06-15-2010, 02:35 PM
I actually would suggest using a table layout, so you can use the cells for the menu's. That way, the menu's will move up and down depending on the amount of links in it. You can even center the layout if you wish.

The way you've got it right now, the menu's are positioned on a specific place of the page, so you'd have to recalculate the position of the mailing list every time after adding a link. Do you know how to create a table layout?

SB65
06-15-2010, 03:15 PM
There's no need at all for a table here.

The problem with the css you've posted is that it's using a lot of absolute positioning. So if one of your elements gets bigger, you need to change the absolute position of all the other elements. If you remove the absolute positioning then the elements in the page will automatically align as they extend or shrink. That said, your link doesn't have the absolute positioning - so maybe you've already done that?

You might also want to have a look here (http://bonrouge.com/3c-hf-fluid-lc.php) for a three column layout.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum