PDA

View Full Version : three column troubleshooting



thecssshack
Jul 21st, 2010, 12:08 AM
ok i know this is in the faq, but I can't get all three columns directly below my split header without 1 or 2 going down. I'd like to get my own code working before I just grab someone else's layout

css code:

@charset "utf-8";
/* CSS Document */

#totalcontent
{
margin-left:auto;
margin-right:auto;
}

#headerleft
{
height:100px;
margin-right:35%;
border:inset thin #000;
margin-right:206px;
}
#headerright
{
height:100px;

border:inset thin #000;
float: right;
//width: 35%;
width: 206px;
}
#leftbar
{
//float:left;
width: 30%;
margin-right:70%;
border:inset thin #000;

}

#maincontent
{
margin-left:30%;
margin-right:206px;
border:inset thin #000;

}

#rightbar
{
position:relative;
float:right;
width: 206px;
border:inset thin #000;

}


html code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untilted</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="totalcontent">

<div id="headerright">
<h1>login</h1>
</div>

<div id="headerleft">

<h1>header</h1>
</div>

<div id ="rightbar">

<p> ads </p>

</div>


<div id="leftbar">

<p> content </p>

</div>


<div id="maincontent">

<p> deliver main here </p>

</div>





</div>
</body>
</html>

abduraooft
Jul 21st, 2010, 09:27 AM
I'd like to get my own code working before I just grab someone else's layoutHow about learning the trick by yourself from a tutorial like http://bonrouge.com/3c-hf-fluid.php ?