How to float boxs using CSS - html

Question

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>

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

$(".clearfix").prev().css("float","right").css("margin","0px");
AND
$($($(".clearfix").nextAll())[3]).css("float","right").css("margin","0px");
Will do what you need.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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/.