Diventare Creative Diventare Creative - 6 months ago 10
CSS Question

Why is the DIV with ID Form dropping below the adjacent DIVs?

I cannot correctly position the div

form
in my layout.

By looking at my div placement and css below, does anyone have an idea what I could be doing wrong?

<div id="wrapper">
<div id="logo"></div>
<div id="topnav"></div>
<div id="nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li id="last"><a href="#">link4</a></li>
</ul>
</div>
<div id="gallery"></div>
<div id="floorplans"></div>
<div id="development"></div>
<div id="projects"></div>
<div id="form"><div>
</div>

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


You'll notice the div
form
is dropping down. What should I do to get things to line up? Should I rework the placement of the divs?

The css for the layout is (I have only included code for the divs affected):

<style type="text/css">
#floorplans {
float: left;
height: 165px;
width: 203px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(images/floorplans.jpg) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#development {
float: left;
height: 165px;
width: 204px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
background: #FFFFFF url(images/development.jpg) no-repeat;
padding-top: 14px;
padding-left: 20px;
display: block;
color: #000000;
line-height: 1.5em;
padding-right: 10px;
}
#projects {
background: #FFFFFF url(images/projects.jpg) no-repeat;
height: 127px;
width: 153px;
text-align: left;
padding-left: 300px;
color: #333333;
padding-top: 25px;
display: block;
float: left;
position: relative;
line-height: 1.5em;
font-size: 10px;
padding-right: 15px;
clear: left;
}
#form {
background: #990000 url(images/form.jpg) no-repeat;
float: left;
height: 309px;
width: 450px;
position: relative;
padding-top: 20px;
padding-left: 30px;
padding-right: 30px;
color: #FFFFFF;
}
</style>

Answer

The form div's top is in line with the top of the div that precedes it. The clear:left; on #projects moves #projects to the next line (good), along with the following content (bad). Try a negative top margin, or consider restructuring your HTML to put #form before #projects.

Adding the following should work:

#form {
    margin-top:-180px;
}
#projects {
    border-right: 1px solid #FFFFFF;
}