CODEWITHSUNDEEP
cssresponsive-designfluid
egr103
egr103

Reputation: 4018

Responsive/Fluid 4 column with fixed margin

For the life of me I can't workout why my 4 col layout is breaking, could someone help me fix? When you make the browser smaller, the layout changes to 3 cols, I need to be 4 cols at all screen sizes.

Its a fluid width ('max-width: 1056px') with a '12px' fixed margin. http://jsfiddle.net/KwUcG/1/

I don't want to use '@media' and breakpoints, hence why I've used max-width and percentages.

HTML

<section id="organisations">

<div class="wrap">
    <div class="inner">
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
        <div class="fourcol">
            <div class="block">
                <img src="img/fitzwilliam-museum.jpg" />
                <p>Home to half a million objects of art and archaeology from pre-history to the present day.</p>
            </div>
        </div>
    </div>
</div>

</section>

CSS

.wrap {
padding: 0 40px;
margin: 0 auto;
background: #e4f;
overflow: hidden;
}

.inner {
    max-width: 1056px;
    margin: 0 auto;
    background: #34e;
    overflow: hidden;
}

.fourcol {
display: inline-block;
width: 24%;
margin-left: 12px;
background: #ccc;
}

.fourcol:first-child { margin-left: 0; }

Upvotes: 1

Views: 5852

Answers (2)

Michael
Michael

Reputation: 7092

http://jsfiddle.net/KwUcG/2/

Works fine with float: left;

Another problem you will run into is that you need to use % margins.

I suggest using 1% margins with 25% width columns. Adding box-sizing: border-box; fixes box sizing issues when floating.

.wrap {
    padding: 0 40px;
    margin: 0 auto;
    background: #e4f;
    overflow: hidden;
}

    .inner {
        max-width: 1056px;
    width: 100%;
        margin: 0 auto;
        background: #34e;
        overflow: hidden;
    box-sizing: border-box;
    }

.fourcol {
    float: left;
    width: 24%;
    margin-left: 1%;
    margin-right: 0;
    background: #ccc;
    box-sizing: border-box;
}

.fourcol:first-child { margin-left: 0; }

Reason why you can't use fixed margin:

Take 1056px width for example. 24% of 1056px = 253.44 times 4 columns = 1013.76 + 3 columns worth of 12px margin space is 1013.76 + 36 = 1049.76. In this situation, this works with some space left over.

Take an example of 800px wide however...

24% of 800px = 192 times 4 columns = 768 + 36 (3 columns worth of 12px margin space) = 804px

804px is more than the 100% of 800px, and thus it breaks. You could avoid this to an extent by decreasing 24 to 23 or 22 or 21... But then you are loosing real-estate at large widths.

When using % margins everything adds up...

Upvotes: 2

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10653

unfortunately, you'll have to use percentages for the margin as well. When I shrink the .inner to 300px, 12px is too much, the column itself is 70px. Try using 1% for the margin, and a bit less (for browser incompatibilities) in the width, eg 23.7% instead of 24%

To clarify, the suggested CSS is :

.fourcol {
   display: inline-block;
   width: 23.7%;
   margin-left: 1%;
   background: #ccc;
}

Upvotes: 0

Related Questions