Topic: basic 2 column css layout (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=23776" title="Pages that link to Topic: basic 2 column css layout (Page 1 of 1)" rel="nofollow" >Topic: basic 2 column css layout <span class="small">(Page 1 of 1)</span>\$

ninmonkeys Nervous Wreck (II) Inmate From: Insane since: May 2004	posted 10-24-2004 07:16 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> 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; }
zavaboy Bipolar (III) Inmate From: f(x) Insane since: Jun 2004	posted 10-24-2004 09:17 Keep in mind that you can't control the height of <div> tags with CSS, it's controled by what it contains.
tntcheats Bipolar (III) Inmate From: BC, Canada Insane since: Jun 2004	posted 10-24-2004 09:35 You can create the illusion of both columns being equal by having a background image of about maybe 80 px in height (or larger, depending on the comprimise you want: size or speed) on your containing div. ----------------------------------------------------- funny websites \| funny signatures \| funny jokes Ozone Asylum KILLED my inner child.
Steve Maniac (V) Inmate From: Boston, MA, USA Insane since: Apr 2000	posted 10-25-2004 00:12 very helpful article at alistapart: http://www.alistapart.com/articles/fauxcolumns/ Here is a link to some well made templates to pick apart and study. Good explanations too. http://webhost.bridgew.edu/etribou/layouts/ especially the 2 column with footer: http://webhost.bridgew.edu/etribou/layouts/2col_footer/index.html Hope that helps

Topic: basic 2 column css layout (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=23776" title="Pages that link to Topic: basic 2 column css layout (Page 1 of 1)" rel="nofollow" >Topic: basic 2 column css layout <span class="small">(Page 1 of 1)</span>\$

ninmonkeys
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

posted 10-24-2004 07:16

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>

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;

}

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

posted 10-24-2004 09:17

Keep in mind that you can't control the height of <div> tags with CSS, it's controled by what it contains.

tntcheats
Bipolar (III) Inmate

From: BC, Canada
Insane since: Jun 2004

posted 10-24-2004 09:35

You can create the illusion of both columns being equal by having a background image of about maybe 80 px in height (or larger, depending on the comprimise you want: size or speed) on your containing div.

-----------------------------------------------------
funny websites | funny signatures | funny jokes

Ozone Asylum KILLED my inner child.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted 10-25-2004 00:12

very helpful article at alistapart:
http://www.alistapart.com/articles/fauxcolumns/

Here is a link to some well made templates to pick apart and study. Good explanations too.
http://webhost.bridgew.edu/etribou/layouts/

especially the 2 column with footer:
http://webhost.bridgew.edu/etribou/layouts/2col_footer/index.html

Hope that helps

Post Reply

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	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
*WARNING* BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail

Maximum Security

OZONE

DHTML/Javascript

Server-Side Scripting - Oh my!

CSS - DOM - XHTML - XML - XSL - XSLT

Stupid Basic HTML

Visual Therapy

Photoshop

Photoshop Pong, Anyone?

***WARNING*** BIG SIG APPROACHING

Photography

3D Modelling & Rendering