CODEWITHSUNDEEP
htmlcsspercentagemultiple-columns
Retador
Retador

Reputation: 223

How can I get 3 columns on the same line?

I am trying to get three columns on one line. It worked until I added some padding to the divs. I am using percentages for making it kinda responsive. The below is the CSS:

.contentLine .column {
    float: left;
    margin: 0;
    width: 31%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}

.contentLine .last {
    margin-right: 0;
}

Here is my fiddle

Did I make a mistake with the percentages?

Upvotes: 0

Views: 2272

Answers (3)

Harry
Harry

Reputation: 89760

Reduce the width of .column to 30%.

It currently goes to next line because, there are 3 boxes with width 31% (total 93%). They have padding (right and left) of 1% (so that totals upto 6%) and you have margin-right of 1% (which totals to 3%) and all together exceeds 100%.

.contentLine .column {
    float: left;
    margin: 0;
    width: 30%;
    margin-right: 1%;
    padding: 1%;
    position: inherit;
}

Upvotes: 2

Love Trivedi
Love Trivedi

Reputation: 4046

Demo HERE Use margin-right:.5%; 

.contentLine .column {
float: left;
margin: 0;
width: 31%;
margin-right: .5%;
padding: 1%;
position: inherit;
}

and change last column div like this. because you are using class attribute two times and you can use class attribute only one time in a single tag.

Use

<div class="column last">

not<div class="column" class="last"> it is worng.

Upvotes: 2

asifrc
asifrc

Reputation: 5841

Reduce the width of your columns. With all the percentages and extra space added in, it all adds to over 100% which is why the third column will always be on the next line. Instead of 31%, try 30%.

Upvotes: 2

Related Questions