Help with html/css layout?

O

orange juice

New member
I'm trying to create this: http://i40.tinypic.com/8xpn5h.jpg
but I'm having trouble with the margins, text, and navigation.

CSS:

body{
background: #bbb;
}

#container{
height: 750px;
width: 1000px;
background-color: #ccc;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
}

#title{
height: 80px;
width: 990px;
background-color: #ccc;
margin: 10px;
font-family: 'Garamond Regular';
margin: 10px;
}





#nav{
font-family: 'Garamond Italic';
height:35px;
width: 990px;
font-color: #222;
font-size: 18px;
margin: 10px;
}

#content{
width: 770px;
height: 515px;
font-size: 13px;
font-face: 'Garamond Regular';
font-color: #555;
background-color: #eee;
float: left;
margin: 10px 0px 10px 10px;
}

#h1{
width: 750px;
height: 151px;
background-color: #fff;
margin: 10px;
}

#h2{
width: 750px;
height: 151px;
background-color: #fff;
margin: 10px;
}

#h3{
width: 750px;
height: 151px;
background-color: #fff;
margin: 10px;
}

#box1{
width: 130px;
height: 130px;
background-color: #ddd;
margin: 10px;
float: left;
}

#box2{
width: 130px;
height: 130px;
background-color: #ddd;
margin: 10px;
float: left;
}

#box3{
width: 130px;
height: 130px;
background-color: #ddd;
margin: 10px;
float: left;
}


#htext{
font-size: 13px;
font-family: 'Garamond Regular';
font-color: #555;
margin: 10px;
float: right;
}



#right{
width: 190px;
height: 515px;
font-size: 13px;
font-face: 'Garamond Regular';
font-color: #555;
background-color: #aaa;
float: right;
margin: 10px;
}

#rbox{
height: 125px;
width: 170px;
background-color: #fff;
margin: 10px;
}

.bodytxt{
font-size: 13px;
font-family: 'Garamond Regular';
font-color: #555;
}

#footer{
height: 70px;
width: 980;
margin: 10px;
background-color: #ddd;
clear:both;
}

HTML:::::::::::::::::::::::::::::::::::::
<html>
<head>
<title>wireframe</title>
<link rel="stylesheet" href="style.css"

type="text/css">
</head

<body>

<div id="container">
<div id="title"><font size="36px"

face="Garamond Regular"

color="#000">Title</font>







</div>

<div id="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">FAQs</a>
<a href="#">Store</a>
<a href="#">Contact</a>
</div>
<div id="content">
<div id="h1">

<div id="box1"></div>
<div id="htxt"><h2>Heading 1</h2>Lorem ipsum

dolor sit amet, consectetur adipisicing elit,

sed do ciusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis

aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat

nulla pariatur. Excepteur sint occaecat

cupidatat non proident, suny in culpa qui

officia deserunt molit anim id est

laborum.</div>



</div>

<div id="h2">

<div id="box2"></div>
<div id="htxt"><h2>Heading 1</h2>Lorem ipsum

dolor sit amet, consectetur adipisicing elit,

sed do ciusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis

aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat

nulla pariatur. Excepteur sint occaecat

cupidatat non proident, suny in culpa qui

officia deserunt molit anim id est

laborum.</div>

</div>

<div id="h3">

<div id="box3"></div>
<div id="htxt"><h2>Heading 1</h2>Lorem ipsum

dolor sit amet, consectetur adipisicing elit,

sed do ciusmod tempor incididunt ut labore et

dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis

aute irure dolor in reprehenderit in

voluptate velit esse cillum dolore eu fugiat

nulla pariatur. Excepteur sint occaecat

cupidatat non proident, suny in culpa qui

officia deserunt molit anim id est

laborum.</div>

</div>




</div>

<div id="right">

<div id="rbox">
</div>

<h2>Heading 2</h2>
<p class="bodytxt">Lorem ipsum dolor sit

amet, consectetur adipisicing elit, sed do

ciusmod tempor incididunt ut labore et dolore

magna aliqua. Ut enim ad minim v
 
Back
Top