Topic: basic 2 column css layout Pages that link to <a href="https://ozoneasylum.com/backlink?for=23776" title="Pages that link to Topic: basic 2 column css layout" rel="nofollow" >Topic: basic 2 column css layout\
 
Author Thread
ninmonkeys
Nervous Wreck (II) Inmate

From:
Insane since: May 2004

 IP logged posted posted 10-24-2004 07:16 Edit Quote

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

 IP logged posted posted 10-24-2004 09:17 Edit Quote

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

 IP logged posted posted 10-24-2004 09:35 Edit Quote

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

 IP logged posted posted 10-25-2004 00:12 Edit Quote

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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu