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:


« BackwardsOnwards »

Show Forum Drop Down Menu