CODEWITHSUNDEEP
htmlcss
cristi
cristi

Reputation: 93

How to display line items in twos?

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!

Upvotes: 0

Views: 74

Answers (3)

m4n0
m4n0

Reputation: 32255

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:

enter image description here

Upvotes: 3

ahpan
ahpan

Reputation: 177

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

Upvotes: 0

user3253002
user3253002

Reputation: 1671

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

Upvotes: 0

Related Questions