CSS divs not expanding - please help point out the obvious [Archive]

View Full Version : CSS divs not expanding - please help point out the obvious

eniki

07-04-2006, 04:39 PM

Hi everyone,

This is driving me mad, i've done it before but I really don't remember how.

Source is at http://alpha.idealwebsites.co.uk/index.html and then http://alpha.idealwebsites.co.uk/styles.css

Now...

The page looks ok as long as your screen res is high, but if you take your browser window and drag it so it only fills the top half of your screen you will notice that, upon scrolling down to see the rest of the content, the divs that enclose the content aren't expanding past the viewport.

As i remember this wasn't too much work last time but tonight it's got me.

Anyone who can point out anything would be very much appreciated.

Cheers guys!

:lovewht:

stripeyteapot

07-04-2006, 05:02 PM

You're using absolute positioning incorrectly. To divide your page up, you should use floats and margins, not POSITION. position:attribute; should be used only where absolutely necessary, it's not necessary here.

Your layout is essentially this:

* {border:0; margin:0; padding:0;}
html {background:#999;}
body {background:#FFF; margin:0 auto; width:768px;}

h1 {background:#0790C7 url(img/logo.png) top left no-repeat;}
h1 span {display:none;}
#left {float:left; width:160px;}
#content {background:url(img/right.png) top right no-repeat; padding:5px 116px 5px 5px;}

<body>
<h1><span>Website Title</span></h1>

<div id="left">
<ul>
<li>My Menu item</li>
<li>My Menu item</li>
<li>My Menu item</li>
</ul>
</div>

<div id="content">
<h2>Page Title</h2>
<p>Content</p>
</div>

</body>

Pretty much. I've had a few glasses of wine, had a BBQ it's really nice here (off topic lol), so you may need to modify the code a little, maybe add a float:right; to #content.

But I think that should work - Remember absolute positioning isn't for page layout, unless absolutely necessary.

stripeyteapot

07-04-2006, 05:05 PM

Oh, for what it's worth, you're definately on the right track, you just need to play with float:left/right; rather than position:absolute; and your code will be pretty much perfect :)