Here is a visual representation of the issue I am facing:
View the screenshot of the rendered page here: http://cl.ly/image/0E2N1W1m420V/Image%202012-07-22%20at%203.25.44%20PM.png
The first problem I have encountered is the excessive empty space between the banner and the "Web Design" div. The second issue is that the "Web Development" div should be positioned next to the "Web Design" div. Both of these divs have specified widths of 23%, and although I attempted to utilize the float property, it did not resolve the problem.
Here is the HTML code snippet:
<div id="maininfo">
<div id="eyediv">
<li><a class="eye"></a></li>
<h1>Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
<button type="button">SEE MORE</button>
</div>
<div id="spannerdiv">
<li><a class="spanner"></a></li>
<h1>Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia condimentum dignissim. Suspendisse potenti. Nunc in metus id lorem accumsan vehicula. Proin posuere lacus id odio tincidunt mattis sit amet et sapien. Nulla facilisi. Quisque sodales risus eget mauris adipiscing vitae scelerisque metus mattis. Praesent lectus purus, feugiat eleifend faucibus nec, volutpat sed eros. Praesent quis ante pharetra mauris pretium porttitor.</p>
<button type="button">SEE MORE</button>
</div>
And here is the CSS code:
#maininfo {
clear: both;
}
#maininfo li {
list-style: none;
}
#eyediv {
margin-left: 15%;
width: 23%;
}
#spannerdiv {
width: 23%;
padding-left: 3px;
float: left;
}