basic 2 column css layout — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

basic 2 column css layout

This page's ID: 23776

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I'm trying to get a simple 2 column layout with a header. It almost works, except the #rightcontent's right and bottom sides do not line up to make a rectangle. I tried creating one div to wrap everything in #contentcontainer and messed around with width's, heights, and floats, and can't get it to work. What am I doing wrong? Thanks. (the html and css validate) index.html[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>MyTitle</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head><body> <div id="contentcontainer"> <div id="headercontent"> <p> [Header Image Logo] </p> </div> <div id="leftcontent"> <p><b>May, 4, 2004</b></p> <p>Some fake news update today blah blah blah. blha... blah asldjfkla</p> <p><b>May, 2, 2004</b></p> <p>Some other fake news update today blah blah blah. blha... blah asldjfkla</p> </div> <div id="rightcontent"> <p><b>some title</b></p> <p><a href="#">someLink</a><br /><a href="#">someLink</a><br /></p> <p><b>some title</b></p> <p><a href="#">someLink</a><br /><a href="#">someLink</a><br /></p> </div> </div> </body> </html>[/code]style.css[code]#contentcontainer { border: 1px solid green; } #headercontent { border: 1px solid orange; } #rightcontent { border: 1px solid red; padding:0px; margin:0px; float:left; width:40%; } #leftcontent { float:left; width:40%; background:#ffffff; border:2px solid #000000; padding:0px; margin:0px; } a { color:#b86007; text-decoration:none; } a:hover { color:#1C5E96; text-decoration:underline; } body { background-color:#c0c0c0; background-image: url("graphics/back.jpg"); color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; margin: 0px 0px 0px 0px; margin-left:10%; margin-right:10%; } p { padding:15px; margin:0px; } img { border:0px; }[/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu