I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this:
Logo-----------Info
Business-------Client
I initially thought it would be simple by using the Float property. However, when I set that property to left and right for the Logo and Info, the Business and Client divs end up appearing between them rather than below them as desired.
Logo----Business----Client---Info
You can find the code at: http://jsfiddle.net/YMh3C/304/
While I want the issue with the code fixed, my main goal is to comprehend why this behavior occurs.
#logo {
float: left;
text-align: center;
}
#info {
float: right;
text-align: center;
}
#business {
float: left;
text-align: center;
}
#client {
float: right;
text-align: center;
}<section>
<div id="logo">
<div>{{ Logo }}</div>
<div>{{ Logo }}</div>
<div>{{ Logo }}</div>
<div>{{ Logo }}</div>
<div>{{ Logo }}</div>
</div>
<div id="info">
<div>{{ Info }}</div>
<div>{{ Info }}</div>
<div>{{ Info }}</div>
<div>{{ Info }}</div>
<div>{{ Info }}</div>
</div>
<div id="business">
<div>{{ temp_business1 }}</div>
<div>{{ temp_business2 }}</div>
<div>{{ temp_business3 }}</div>
<div>{{ temp_business4 }}</div>
<div>{{ temp_business5 }}</div>
<div>{{ temp_numerodefactura }}</div>
<div>{{ temp_fechadefactura }}</div>
</div>
<div id="client">
<div>{{ temp_client1 }}</div>
<div>{{ temp_client2 }}</div>
<div>{{ temp_client3 }}</div>
<div>{{ temp_client4 }}</div>
<div>{{ temp_client5 }}</div>
</div>
</section>