Divs within divs not aligning

HTML & CSS
1

Hi everyone,

Does anyone know why my 3x div boxes wont align in the centre of the parent div container?

<style type="text/css">
.box_container {
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	clear:both;
	}
.boxes {
	float: left;
	width: 25%;
	text-align: center;
	margin-right: 15px;
	margin-left: 15px;
	}
</style>
</head>

<body>
<div class="box_container">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
<div style="clear:both;"></div>
</div>
</body>
2

[FONT=Verdana]They won’t align in the middle because you’ve floated them to the left.

Because you’ve gone for a fixed width, this is an easy one to solve. Each of the inner boxes is 25% of 800 = 200px

So the three boxes plus the margin’s you’ve already given them are 3×(200+15+15) = 690px

To centre the three boxes, we need to shift them to the right by (800–690) ÷ 2 = 55px

You can do this by adding the line[/FONT]

.boxes:first-child {margin-left:70px;}

That moves the first box an extra 55px (70px minus the 15px margin you’ve already given it) to the right, so they will then all line up nicely in the middle.

3

Thanks Stevie for your response.

However, I will also want to use a flexible 100% width layout. What would be the best option for that?

4

I read an A List Apart article about that - it wasn’t really an informative article, just a common sense article. But, as they say, common sense just isn’t that common.

To do that, you’ll have to take the margin that you want (70px) and divide it by whatever is wrapping it (200px).

Doing the math, you get 7/20, or 35%.

Got it?
~TehYoyo

5

Thanks TehYoyo, do you have the link to the article at all?

6

Actually I do. I searched around and found it - it was a link from a 24ways article.

Link

Not a bad article, really.

~TehYoyo

7

A simple option would be to change float: left to display: inline-block:

.boxes {
	display: inline-block;
}

Then the container can be any width (e.g. 80%) and the boxes will remain centered.

8

as far as your OP you coudl try this for fluid grid centering: It wont be PX (no % grid will EVER BE as rounding error sare always present and vary by browser. But if your GD is adapted to this… the following code should work fine.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
<style type="text/css">
.box_container {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	overflow:hidden;
	background: blue;
		}
.boxes {
	float: left;
	width: 25%;
	background: pink;
	text-align: center;
	position: relative;	
	left: 12.5%;
	margin-left:30px;	
	}
.boxes:first-child{	margin-left:-30px;}

</style>
	</head>
	<body>
</head>

<body>
<div class="box_container">
<div class="boxes">1</div>
<div class="boxes">2</div>
<div class="boxes">3</div>
</div>
</body>
	</body>
</html>
9

Thanks guys for all your ideas and help with this. I have decided to opt for a different method to allow me to use media queries. I will keep all of your ideas and suggestions in mind for future work though. Thanks again, your responses are very much appreciated :slight_smile:

10

Always happy to help.

~TehYoyo

11