CODEWITHSUNDEEP
htmlcsscss-float
Paul Designer
Paul Designer

Reputation: 865

How to float boxs using CSS

I am creating a responsive grid layout but want to know how to float boxes and keep the last container floated right with no margin.

For example. Full width desktop version will show 4 boxes.

Ipad will show 3 boxes

Phone will show 2 boxes. The last box will need to have 0 margin right.

here is my fiddle http://jsfiddle.net/SGy4R/2/

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>

    <div class="clearfix"></div>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>

Upvotes: 1

Views: 454

Answers (8)

carpenumidium
carpenumidium

Reputation: 1203

Instead of floating the .boxes, you can use display: inline-block and add text-align: justify to #container.

But it still wouldn't work as expected yet, so you take the extra div you used for clearfix and relegate it to the bottom of the #container in the markup.

Then you change the name of the class from .clearfix to something like .spacer; the spacer class will have: display: inline-block and width: 100%.

You will also need to give .boxes vertical-align: top; otherwise the horizontal alignment can break if inline elements like text exists in the boxes.

You'll notice now that the boxes are arranged with proper spacing in between and the first and last boxes in a line stick to the edges.

JSFIDDLE

Markup:

<div id="container">
    <div class="box"></div>    
    <div class="box"></div>    
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>

    <div class='spacer'></div>
</div>

CSS:

* {
    box-sizing: border-box; /* www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    }

#container {
    width: 480px;
    border:1px solid black;

    text-align: justify;
    }

.box {
    display: inline-block;
    vertical-align: top; 

    width: 100px;
    height: 100px;
    background:red;

    margin-bottom:20px;
    color:white;
    }

.spacer {
    display: inline-block;
    width: 100%;
    }

Here's an article which explains more about this method http://www.barrelny.com/blog/text-align-justify-and-rwd/.

Upvotes: 0

Charles Ingalls
Charles Ingalls

Reputation: 4561

I actually think this topic is a bit more tricky as I am sure that you do not only want to remove the margin on the last box but you also want all boxes to have the same width.

It means that we need to know how many boxes are currently displayed and disregard the ones hidden by the media query, remove the padding (I worked with paddings on a wrapper rather than margins) on the last container and share the padding among all boxes to make them equal in width.

Check out the fiddle: http://jsfiddle.net/SGy4R/8/

I basically get the width of the #container and count all visible children inside the container. I then get the padding of the first box to calculate the padding share for each box. With the for loop I apply the calculated width to each box element while removing the padding from the last one.

I added a media query to the fiddle so you can see how it works when there are 3 or 4 boxes inside the #container. Just resize the result pane and run the fiddle again.

// Get width of container
var cont_width = $('#container').width();
// Count box divs in container
var cont_children = $("#container > *:visible").length;
// Get box padding from first child
var box_padding = $('.box:first-child').innerWidth();
// Share last "non-existent" padding with all 4 boxes
var padding_share = box_padding / cont_children;
// Calculate box size
var box_width = (cont_width / cont_children) + padding_share;

// Set width for each box, remove padding for last box
for ( var i = 0; i <= cont_children; i++ ) {
    if (i === cont_children) {  
        $(".box:nth-child(" + i + ")").css({
            'width':box_width - box_padding,
            'padding-right': '0px'
        });
    }
    else {
        $(".box:nth-child(" + i + ")").width(box_width-box_padding);
    }
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Change your markup like this:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>
    <div class="clearfix"></div>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>

And set margin-right: 0; for last-child

.container > div:last-child{
    margin-right: 0;
}

Upvotes: 1

cimmanon
cimmanon

Reputation: 68319

Use negative margins on the container and get rid of your clearfix divs:

http://codepen.io/cimmanon/pen/dwbHi

#container {
  margin: -20px 0 0 -20px;
  overflow: hidden;
}

#container .box {
  margin: 20px 0 0 20px;
}

Upvotes: 0

ediblecode
ediblecode

Reputation: 11971

You could use a media query:

// Normal
.box:nth-child(4n) { margin-right:0; }

@media (max-width: 3boxThreshold) {
    .box:nth-child(3n) { margin-right:0; }
}

@media (max-width: 2boxThreshold) {
    .box:nth-child(2n) { margin-right:0; }
}

However, the n-th child selector isn't a valid selector for older browsers so you would need to add some jQuery instead:

$(document).ready(function(e) {
    removeMargin();

    $(window).resize(function() {
        removeMargin();
    });

    function removeMargin() {
        var wW = $(window).width();

        // Resets the boxes
        $('.box').css("margin-right", "insertDefaultValueHere");

        if (wW < 3boxThreshold)
            $('.box:nth-child(3n)').css("margin-right", 0);
        else if (wW < 2boxThreshold)
            $('.box:nth-child(2n)').css("margin-right", 0);
        else
            $('.box:nth-child(3n)').css("margin-right", 0);
    }
});

Upvotes: 0

mehdi
mehdi

Reputation: 1755

see this DEMO

EDIT

you can remove #container width and add #container padding-right:20px; 

.box{
    float:left;
    width:100px;
    height:100px;
    background:red;
    margin-left:20px;;
    margin-bottom:20px;
    color:white;
}
.clearfix{
    clear:boh;
}
#container{        
    border:1px solid black;
    float:left;
    padding-right:20px;
}

Upvotes: 0

Ricky Stam
Ricky Stam

Reputation: 2126

$(".clearfix").prev().css("float","right").css("margin","0px");

AND

$($($(".clearfix").nextAll())[3]).css("float","right").css("margin","0px");

Will do what you need.

Upvotes: 0

SaturnsEye
SaturnsEye

Reputation: 6499

Add:

.box:nth-of-type(4n){
margin-right:0
}

Upvotes: 1

Related Questions