divide body content into four equal-width div ?

**java148** · Feb 27, 2012 14:43

I want to divide body content into four equal-width div, but failed. here is the code. If very hard to control, I prefer the fourth one can take all leftover width.

Thanks

Code:

<div id="first_column" style="width:23%; margin-right:0px; border:1px solid blue;">
	1
</div>

<div id="fourth_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
4
</div>
<div id="third_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
3
</div>
<div id="second_column" style="width:23%; border:1px solid blue;float:right;margin-right:0px;">
2
</div>

**ralph.m** · Feb 27, 2012 16:32

Hi java148. Welcome to SitePoint.

This is pretty basic, but something like this may be more useful:

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
div {width: 25%; float: left;}
div div {border: 1px solid blue; width: 100%;}
</style>
	
</head>

<body>

<div>
	<div>1</div>
</div>

<div>
	<div>2</div>
</div>
<div>
	<div>3</div>
</div>
<div>
	<div>4</div>
</div>

</body>

</html>

**dresden_phoenix** · Feb 27, 2012 18:04

Welcome to Sitepoint, java148.

Ralph's solution is quite practical as you most likely have other divs or containing elements within these first four proposed divs. It's also IE6 friendly w/o requiring classes.

However is an 11 year old browser is not withing your range of support and you want to streamline the markup you can also do this:

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Experiment</title>
		<style type="text/css">
		body{padding-left:2px;}/*this abount accounst for the 'extra' border I added*/
		body>div {width: 25%; float: left;border: 1px solid blue; margin-left:-2px; }
		body>div+div {border-left:none; margin-left:-1px;}/*eliminates that 'double border' effect*/

		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

note That you can still replace body>div and div+div with classes.. and it will add IE6 support.

hope that helps

**java148** · Feb 27, 2012 20:59

If I put some margin, then it doesn't work. how can we just let the fourth column take all leftover width ? And how to make the "Customer" shown in the center ?

Code:

<div id="first_column" style="width: 25%; float: left;margin-right:5px;">
	<div style="border: 1px solid blue; width: 100%;">
		<span style="align:center;">Cusomter</span>
	</div>
</div>

<div id="second_column" style="width: 25%; float: left;margin-right:5px;">
	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">2</div>
</div>
<div id="third_column" style="width: 25%; float: left;margin-right:5px;">
	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">3</div>
</div>
<div id="fourth_column" style="width: 25%; float: left;">
	<div style="border: 1px solid blue; width: 100%;;padding-left:0px;">4</div>
</div>

**RyanReese** · Feb 27, 2012 21:21

As for the "Customer" being in the center, it's not align:center, it's text-align:center;

However remove that altogether. To get inline elements to center,y ou must set the text-align:center; on the PARENT. Aka that div parent needs that rule.

You also should be careful in your CSS, you have an extra semi colon after width:100%; repeated 3 times, all in your inner divs, most likely from copy paste.

**ralph.m** · Feb 27, 2012 21:27

If you want gaps between those sections, then you can't set widths of 25% and add on margins to that, as those margins are added to the overall width and so you run out of space.

You could either reduce the widths to, say 24% and set a margin of 1%, or put the margins on the inner divs instead and change width: 100% to width: auto.

As for the last column taking up the remaining space, it can be done, no doubt, but it's easier if the other columns have a fixed pixel width. E.g.

Code:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
div.col {width: 200px; float: left; margin-right: 5px;}
div.last {margin-left: 620px;}
div > div {width: auto; text-align: center; border: 1px solid blue;}

</style>
	
</head>

<body>

<div class="col">
	<div>Customer</div>
</div>

<div class="col">
	<div>2</div>
</div>
<div class="col">
	<div>3</div>
</div>
<div class="last">
	<div>4</div>
</div>

</body>

</html>

By "customer" in the center, I assume you mean the text centered? That done with text-align: center (as in the example above).

**dresden_phoenix** · Feb 28, 2012 00:20

Do it like this:

Code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Experiment</title>
		<style type="text/css">
		body{padding-left:68px;}/*this abount accounst for the 'extra' border I added*/
		body>div {width: 25%; float: left;border: 1px solid blue; margin: 0 0 0 -68px; }
		body>div+div {margin-left: 20px; }
		#second>h3{text-align: center; margin-top:0; padding-top:0}
		</style>
	</head>
	<body>
		<div id="first">1</div>
		<div id="second">
			<h3>Customer</h3>
		</div>
		<div id="thrd">3</div>
		<div id="fourth">4</div>
	</body>
</html>

This provides a FIXED width space between divs.
Now as far as your your other questions:

1) As Ryan pointed out, the property is text-align:center; not align:center; Also, putting your CSS in the HTML tags really kinda defeats the purpose.. add IDs or better yet classes and define those within the style tag.. really it's the easiest part of CSS to learn

2) Secondly, it only works for content in BLOCK elements ( span is not a block element) . So to do this you would end up targeting the parent DIV. Which would work but make NO SENSE. that's why...

3) It would be better to use a BLOCK ELEMENT .. since it seems "customers" would be a heading... the we can use Hx ( I chose H3) and targeted that #second>h3 {text:align:center;}

and there u go.

User Tag List

Thread: divide body content into four equal-width div ?

Thread Tools

Display

divide body content into four equal-width div ?

Bookmarks

Bookmarks

Posting Permissions