View Full Version : stacked, nested divs HELP!!

Apr 29th, 2011, 02:41 AM
I hope someone can help me. I am completely new to css and am banging my head over this. I am designing this page in FP2003 (I know it's outdated but I haven't created a webpage in years). In preview, everything looks exactly as it should. In a browser, only the text is visible. What am I doing wrong?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<div id="wrapper">

<div id="title">
</div><!-- end title div -->

<div id="nav">
</div><!-- end nav div -->

<div id="white">
<div id="content">
Lorem ipsum

</div><!-- end content div -->
</div><!-- end white div -->

<div id="footer">

</div><!-- end footer div -->

</div><!-- end wrapper div -->



background-color: #d7d7d7;


width : 1000px;
height : 100%;
background-color : d7d7d7;
background-image: none;
margin-top : 0px;
margin-bottom : 0px;
margin-left : auto;
margin-right : auto;
padding : 0px;


height : 132px;
width : 1000px;
margin-top : -4px;
margin-bottom : 0px;
padding : 0px;
background-image: url('images/new-layout_01.jpg');

height : 61px;
width : 1000px;
margin-top : -4px;
margin-bottom : 0px;
padding : 0px;
background-image: url('images/new-layout_02.jpg');

display : inline-block;
height : 100%;
width : 1000px;
margin-top : -4px;
margin-bottom : 0px;
background-image: url('images/new-layout2_02.jpg');


margin-left : 75px;
height : 100%;
width : 850px;



height : 118px;
width : 1000px;
background-image: url('images/new-layout_05.jpg');


#title, #nav, #white, #footer are to reside within #wrapper. Stacked on on top the other. #content resides within #white.

The only way I can view this in a browser is to put IE into compatibility mode :(

Apr 29th, 2011, 03:10 AM
this is what it is supposed to look like...

Apr 29th, 2011, 03:30 AM
Your html has some errors in it.

Maybe put it through the w3c html validator (http://validator.w3.org/#validate_by_upload) first and fix the html.

Then maybe put the css through the w3c css validator (http://jigsaw.w3.org/css-validator/#validate-by-upload) to make sure it is all ok as well.

But looking at your image, I don't see why you would need to stack any elements on top of anything else. You could just set appropriate background images and colours on elements.

Apr 29th, 2011, 03:45 AM
Just to add, frontpage is terrible! lol...There are much better FREE text editors out there.