PDA

View Full Version : tableless css layout issue



mrdantownsend
Jan 19th, 2007, 10:06 PM
hello, I'm having an issue with this page http://www.freewebs.com/imagesfordet/houdini/template.html

I have this page set up w/ divs and i want the nav and body to be displayed next to eachother

so I used the flaot left and float right properties but then the divs are placed at a higher z index and are above the footer div, and the background shadow doesn;t show up around them

so is there a different way to display divs next to eachother without the flaot property?

thanks


-mrdantownsend

here's the html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Harry Houdini - Template</title>
<style type="text/css" media="all">
@import "stylesheet.css";
</style>
</head>
<body>
<div id="shadow">
<div id="containter">
<div id="head">
</div>
<div id="nav">
</div>
<div id="body">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>


here's the CSS



* {
padding:0px;
margin:0px;
}

body {
/* background */
background-color:#bbbb99;
}

div#head {
/* size */
width:694px;
height:150px;
/* border */
border-style:solid;
border-color:#000000;
border-width:3px;
border-bottom-width:0px;
/* margins */
/* background */
background-color:#aaaa99;
}

div#containter {
/* size */
width:700px;
/* margins */
margin-left:auto;
margin-right:auto;
text-align:center;
}

div#nav {
/* size */
width:170px;
height:400px;
/* border */
border-style:solid;
border-color:#000000;
border-width:3px;
/* margins */
/* background */
background-color:#aaaa99;
}

div#body {
/* size */
width:521px;
height:400px;
/* border */
border-style:solid;
border-color:#000000;
border-width:3px;
border-left-width:0px;
/* margins */
/* background */
background-color:#aaaa99;
}

div#footer {
/* size */
width:694px;
height:30px;
/* border */
border-style:solid;
border-color:#000000;
border-width:3px;
border-top-width:0px;
/* margins */
/* background */
background-color:#aaaa99;
}

div#shadow {
/* size */
width:760px;
/* margins */
margin-left:auto;
margin-right:auto;
text-align:center;
/* background */
background-image:url(images/shadow.jpg);
background-repeat:repeat-y;
background-position:center;
}

Jan 19th, 2007, 10:26 PM
You do want to use the float property.
probably just float:left; on the #nav

then you'll want to clear the floats (http://www.w3schools.com/css/pr_class_clear.asp) with the footer, by adding clear:both; to the #footer.

I thkn thats what your looking for. hope it helps.

mrdantownsend
Jan 19th, 2007, 10:30 PM
I thank you for your time and brilliance, sir, worked like a charm! :thumbsup:

-mrdantownsend

Majoracle
Jan 19th, 2007, 10:32 PM
Inside both your div#nav and div#body, add this to your style:

float:left;

Your body DIV will move to the left of the nav, as long as the width doesn't exceed that of the container.


Edit: lol ok never mind.