Hi,

 

I'm having a problem with this layout. Please see code below.

 

It consists of a main div holder and a content div which holds the following:

 

A header (green box)

 

A nav panel (red box)

 

An image box (light blue)

 

2 more divs for holding text:- yellow and blue box.

 

Below that is a footer which I need to float below varying amounts of content from page to page.

 

But as you can see, to position the blue box I've had to use a minus value (ie top:-560px;) to get it to align with the light blue image box.

 

This has pushed the footer right down the page - a weird blank space which I think has probably got something to do with the minus value I've used.

 

I've tried all sorts of things and this is the closest I've got. Can anyone advise please:

 

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Layout1</title> 

<meta name="keywords" content="" /> 

<meta name="description" content="" /> 

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

</head> 



<body> 

<div id="main"> 

<div id="header"></div> 

 <div id="navigation"> 


</div> 




<div id="box2"></div>




 <div id="box3"></div>

<div id="box4"> 
</div>

<div id="footer"> </div>



</div> 





</body> 

</html> 

 

And the CSS

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

html {
margin: 0 0 1px;
      padding: 0;
}


body {
height: 100%;
margin: 0 0 1px;
      padding: 0;
background-color:#F3F3F3;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#313131;
}

#main {
position: relative;
width: 920px;
min-height: 700px;
top: 0px;
margin-right: auto;
margin-left: auto;
padding: 0;
border: 1px solid #000000;
z-index:1;
background-color:#D1CBB2;
overflow:hidden;
}
#content{
position: relative;
padding: 0px;
border:none;
margin: 0px;
width:920px;
min-height: 250px;
background-color:#D1CBB2;
z-index:1;	
overflow:hidden;
}
#header{
position: relative;
padding: 0px;
border:none;
margin: 8px 0px 0px 0px;
width:920px;
height: 129px;
background-color:#009966;
z-index:3;
}
#navigation {
position:relative;
height: 32px;
border: 0px;
padding: 0px;
width: 920px;
z-index: 10;
float:left;
clear:both;
margin: 0px;
z-index:3;
background-color:#FF3333;
}

#box2{
position: relative;
top: 30px;
left: 0px;
width: 370px;
min-height: 560px;
color:#2D2D2D;
text-decoration:none;
text-align:left;
margin: 15px 0px 0px 0px;
border: 0px solid #993366;
background-color:#99CCCC;
z-index:4;

}
#box3 {
float:left;
width: 340px;
min-height: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:#2D2D2D;
text-decoration:none;
text-align:left;
background-color:#FFCC66;
margin: 40px 5px 14px 10px;
z-index:3;
}

#box4{
position:relative;
left: 410px;
top: -560px;
width: 465px;
min-height: 800px;
font:Arial, Helvetica, sans-serif;
font-size: 14px;
color:#2D2D2D;
background-color: #3366CC;
text-align:left;
margin: 30px 25px 14px 0px;
z-index:24;
clear: right;
}

 

 

Thanks to anyone who takes up the challenge!

how do you want the boxes to appear? are you wanting the light blue, blue and yellow in one horizontal row? if so float:left all three and then clear:both before your footer.

I want the light blue and the dark blue boxes to align horizontally. The yellow box to sit below the light blue box and the footer to float beneath everything - so if there's more content in the dark blue box or the yellow box it pushes the footer down.

 

But why the massive gap???? Is using a minus positioning value a no no?

 

Thanks