How to display line items in twos? - html

Question

I have this site:
link
At the bottom you will find the footer which has 7 items (printing, textile, photo, advertising, gastronomy, about us, contact).
Currently all these elements are in line this shape
Printing-Textile-Photo-Advertising-Gastronomy-About US-Contact
I want to do so
Printing-Textile
Photo-Advertising
Gastronomy-About US
Contact
CODE HTML
<div class="site-info container">
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
</div>
CODE CSS:
.footer-blocks{
float:left;
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
.footer-blocks:last-child{
margin-right:0;
}
I tried to modify the CSS code and got it form
<div class="site-info container">
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks" style="float:left">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
<div class="footer-blocks">
//some code HTML
</div>
</div>
CODE CSS NEW:
.footer-blocks{
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
I know it is not good what we tried but I do not figure out how I could arrange them as they wish.
Probably something simple but I do not know how to fix it.
Could you please help me?
Thanks in advance!

Answer 1

Set the width to 48% for the blocks and min-height will give it equal area in vertical direction. If you need to limit the spacing between the columns, set a fixed width for the parent element.
.site-info.container {
width: 500px; /* Add */
}
.footer-blocks {
color: #fff;
float: left;
margin-right: 2%;
min-height: 330px; /* Add */
text-align: left;
width: 48%; /* Add */
}
Output:

Answer 2

add
<div style="clear: both;">
after each 2 blocks
and change:
.footer-blocks{
float:left;
width:12%;
color:#fff;
margin-right:2%;
text-align:left;
}
to:
.footer-blocks{
float:left;
width:50%;
color:#fff;
text-align:left;
}

Answer 3

Since you're using bootstrap, you can split every two columns into different rows.
Here's some code to get you started
<div class="site-info container">
<div class="row">
<div class="col-md-6">
<div class="footer-blocks">
-- Printing Stuff
</div>
</div>
<div class="col-md-6">
<div class="footer-blocks">
-- Textile Stuff
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="footer-blocks">
-- Photo Stuff
</div>
</div>
<div class="col-md-6">
<div class="footer-blocks">
-- Advertising Stuff
</div>
</div>
</div>
-- ETC.
</div>
Also, there's no need to add the style float:left for your inline css since it's already in the class.
You should check out the bootstrap documentation for more help:
Grid Documentation