Question

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?

#floorplans {   float: left;   height: 165px;   width: 203px;   border-right: 1px solid #FFFFFF;   border-bottom: 1px solid #FFFFFF;   position: relative;   background: #FFFFFF url(https://lorempixel.com/320/170/) 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(https://lorempixel.com/204/165/) no-repeat;   padding-top: 14px;   padding-left: 20px;   display: block;   color: #000000;   line-height: 1.5em;   padding-right: 10px; }  #projects {   background: #FFFFFF url(https://lorempixel.com/153/127/) 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(https://lorempixel.com/450/309/) no-repeat;   float: left;   height: 309px;   width: 450px;   position: relative;   padding-top: 20px;   padding-left: 30px;   padding-right: 30px;   color: #FFFFFF; }

<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?

Answer 1

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; }