I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using:
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="columns">
<div id="borrower">
</div>
<div id="dealer">
</div>
<div id="investor">
</div>
</div>
<div class="footer">
</div>This is the CSS I have applied:
body{
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
width:100%;
height: 100%;
}
#content
{
background-image: url('../Images/background_03.jpg');
background-repeat: no-repeat;
width: 1150px;
height: 399px;
}
#borrower
{
background-image: url('../Images/Borrower.jpg');
background-repeat: no-repeat;
width: 371px;
height: 248px;
float: left;
}
#investor
{
background-image: url('../Images/Lender.jpg');
background-repeat: no-repeat;
width: 371px;
height: 248px;
}
#dealer
{
background-image: url('../Images/dealer.jpg');
background-repeat: no-repeat;
width: 371px;
height:248px;
float: right;
}
#footer
{
clear:both;
}
The problem arises where the Lender DIV appears directly below the Borrower DIV instead of being situated between Borrower and Dealer. How can I rectify this situation?