How can I arrange 3 DIV boxes horizontally?

[definitive]

I know that I can use float, but here's the issue:

My wrapper is 965px wide which will contain these three div boxes. Each box is 335px wide, and has a spacing of 10px between them, so my CSS code was something like this:

#wrapper {
        width: 965px;
}
.box {
	width: 335px;
	height: 300px;
	float: left;
	margin-right: 10px;
}

I then stack the boxes in the HTML like this:

<div id="wrapper">
 <div class="box">
 </div>
 <div class="box">
 </div>
 <div class="box">
 </div>
</div>

Seems simple enough, but I'm having an issue where the last box (since each one has a margin-right: 10px) makes the overall space required more than 965px, so it gets shifted to the next line. Is there some way to do this correctly so that the last box won't move to the next line?

 

[sammich]

add

* {
margin: 0;
}
.box {
position: relative;
}

you could add an inline style:

<div class="box" style="margin-right:0"></div>

Actually, just the last part. The other two parts are slightly optional, though I generally use the relative positioning.

 

[definitive]

Thank you for the reply, but that didn't really accomplish anything. The box still gets moved over to the next line. I was thinking of inline, but I'd like to keep the code clean and same across all of the boxes since the page will have about 20-30 of them.

 

[olup]

you need to make the boxes smaller in order to fit them all in one line.
because you also have margin-right in there that adds another 10px to each box, so each box is actually 345px wide, therefore not aligning them all in one row.

 

[definitive]

Thank you. Just noticed the boxes had to be 315 instead of 335 pixels. The in-line works now, but I'm still wondering if it's possible to avoid having to insert the in-line code for every third box.

 

[olup]

by inline code you mean this <div class="box" style="margin-right:0"></div>?

I would remove that entirely, since you already have a 10px right margin in your .box. Actually don't even get used to using inline style elements because it will a) override any other rule that you have for that element in your stylesheet and b) you should never mix your markup with css styles, unless you absolutely have to.

so basically what you have to do is this to line up your box elements in one row, since you're gonna have twenty or so they should all align inline:

.box {
width: 335px;
height: 300px;
float: left;
margin-right: 10px;
display:inline;

}

 

[definitive]

That's why I didn't want to use custom in-line code in the <div tag - it gets messy.

The issue that occurs without the use of "margin-right:0" is the total width of the three boxes turns out to be 975px, while I need the wrapper to be 965px. Because of that the third box gets moved over. Using display:inline does not solve anything.

 

[jsm4182]

To handle having the 10px margin on 2 of the 3 boxes I would change the margin-right to margin-left, then use the first-child pseudo class to remove the margin from the first box.

so in the css after .box add

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

When you have several elements back to back together, as you do with the 3 div.box within div#wrapper, the first-child pseudo class is only applied to the first one, in this case setting the right margin to 0 on the first element with a class of box.

Another option would be to add more classes to the divs. Most of the time when I have several elements with the same class in a row like that, I will also add an extra class to the first and last items to allow for css like this

<div id="wrapper">
 <div class="box first">
 </div>
 <div class="box">
 </div>
 <div class="box last">
 </div>
</div>

Then in the css to get rid of the right margin on the last box add this after .box

.last {
   margin-right: 0;
}

 

[definitive]

That's pretty much same thing as using "margin-right:0" as mentioned before. I am trying to keep the code the same for every box in the HTML file. Also tried

.box:nth-child(3){margin-right:0px;}

to turn right margin off every third box in the .css file, but that didn't seem to work either.

edit: Ok, I think I just got it to work with a little bit of tinkering:

.box {
	width: 315px;
	float: left;
	margin-left: 10px;
}

.box:nth-child(3n+3) {
	width: 315px;
	float: left;
	margin-left: 0px;
}

Now all the boxes in the wrapper show up with 3 per line, where every third box has its right margin set to 0px. The only thing I'm concerned about is if this will be compatible with the older browsers, since to my understanding this might be CSS3 code...

 

[clemsonhomerun]

did you try this already?

did you try this already?

#wrapper {
width: 965px;
}
.box {
width: 315px;
float: left;
margin-right: 10px;
}

.box:nth-child(3) {
margin-right: 0px;
}


Also, remember, stupid IE doesnt support most cool CSS, but who cares about that line of browsers anyway...

 

[definitive]

Yes, as you can see in my post above, I've gotten it to work with CSS3 (I used margin-left in the example, but then ended up switching to right, and changing 3n+3 to 3n+2, so it works that way).

Now I'm trying to convert it to JQuery for IE compatibility, and having issues since I don't know any JQuery. Here's what I've tried with zero success:

Loaded up main jquery file:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Added the script code to the HTML file:

<script type="type/javascript">$('.box:nth-child(3n+2)').css('margin-right', '0');</script>

Removed the extra CSS3 code I've had:

/* .box:nth-child(3n+2) {
	width: 315px;
	float: left;
	margin-right: 0px;
} */

This doesn't seem to work, and I'm not sure why, but like I mentioned earlier, I am no JQuery master, so it's possible that I've missed a step or two while reading through all of the tutorials that I was able to find.

 

[clemsonhomerun]

I usually do it like so:

<style type="text/css">
#wrapper {
        width: 965px;
}
.box {
	width: 315px;
	float: left;
	margin-right: 10px;
}

.last {
	margin-right: 0px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
$(document).ready(function(){
	$(".box:nth-child(3n)").addClass("last");
});
</script>

This will assign the class last to it in case you change how you want the last box to be later you wont have to rewrite the js, just the css.

 

[definitive]

Something strange happened... I was coding with XHTML Strict doctype. Once I converted to HTML5, my code started working. Still not sure why this happened, but so far it works...

Thank you for all the help.