Columns and borders and centering

Forum Moderators: not2easy

Message Too Old, No Replies

Columns and borders and centering

RammsteinNicCage

5:53 pm on May 22, 2003 (gmt 0)

I'm a newbie to positioning, so I'm just playing around with a page on my site. The layout: header on top, menu on left, content floating on right, border surrounding the entire thing. What I'd like is a border between the menu and content columns. Unfortunately, the content is not always longer than the menu, so if I put the border in the content div, it might not go all the way down to the bottom. Any clue how I can make the border go all the way down to the bottom, no matter what the size of the menu or content?

Also, I'm trying to center the entire thing (header, menu, content). How can I do this, keeping in mind different resolutions and stuff?

Thanks!

Jennifer

Birdman

6:51 pm on May 22, 2003 (gmt 0)

Hello, you could try floating the menu left and putting the border on the content(as you already did), but add a <div style="clear: both;"></div> after the content.

This should stretch the content div to the bottom of the menu div.

Birdman

7:00 pm on May 22, 2003 (gmt 0)

Ok, I just tested and it worked. Note that the "cleared" div is within "content" div.

<style type="text/css">
#nav{background-color: blue; width: 200px; float: left;}
#content{margin-left: 205px; border-left: 2px solid black;}
</style>
<body>
<div id="nav">
<a href="">link link link</a><br />
<a href="">link link link</a><br />
...etc(made longer than content for testing purposes)
</div>
<div id="content">
<p>Content content content content content content content content content content content content
</p>
<div style="clear: both;"></div>
</div>
</body>