3 divs in a row - how to center the middle div?

hello,

<div>
  <div class="floatLeft"></div> 
  <div class="center"></div>
  <div class="floatRight"></div>
</div>

The question is - how do I make the div with class "center" actually in the center. Those 3 divs doesn't take all the width available.

Another divs are floated as class name says.Or should I use different technique?

SPeed_FANat1c

Posting Whiz in Training

295 posts since Apr 2010

Reputation Points: 13

Solved Threads: 13

6 Months Ago

0

If each of your right and left floats have set widths, then add the appropriate margins to the center div (i.e. if both floats are 200px wide then set the left and right margins on your center div to 200px each)

simplypixie

Posting Pro in Training

447 posts since Oct 2010

Reputation Points: 116

Solved Threads: 82

6 Months Ago

0

If you're looking for a blog layout of some sort (three columns, and such) you should consider setting the widths by percentage, thus making the sizes relative to the column container (the outer div).

As for the column alignment, you could float all the columns left. That way, the left one goes first, the middle one in the middle, and the last one to the right.

Nichito

Posting Virtuoso

1,602 posts since Mar 2007

Reputation Points: 424

Solved Threads: 57

6 Months Ago

0

OR, if it's just three columns -

<div>
  <div class="floatLeft"></div> 
  <div class="floatRight"></div>
  <div class="center"></div>
</div>

Make sure all your widths (including margins and padding) add up toless than your screen width (whether you're using percentages or not). Oddly enough, putting the center last allows the floats to go left and right and then the center slides up into the middle. Just remember to clear the floats AFTER the center div.

Dandello

Posting Whiz in Training

263 posts since May 2010

Reputation Points: 28

Solved Threads: 23

6 Months Ago

0

thansk for the answers, I will try.

What I forgot to say was that the center div is variable width. Actualy in the left div there is a logo, in the center div there is a facebook like button, and in the rigth div is copyright info. So the facebook div sometimes is wider, sometims thinner, depends on if you are logged in to facebook or not. So I cannot set specific margin left, thats why I want to center it automatically.

SPeed_FANat1c

Posting Whiz in Training

295 posts since Apr 2010

Reputation Points: 13

Solved Threads: 13

6 Months Ago

0

Centering the center div is simply

margin:0 auto

The auto balances the left and right margins of the div. It should still slide between the left and right divs, but you'll need to at least put a max-width on the center div otherwise it will show up beneath the other two.

Dandello

Posting Whiz in Training

263 posts since May 2010

Reputation Points: 28

Solved Threads: 23

6 Months Ago

0

thank you guys for replies, but it didn't work for me. But at the end I just made margin left for the middle div and thats it, didn't want to waste time.

SPeed_FANat1c

Posting Whiz in Training

295 posts since Apr 2010

Reputation Points: 13

Solved Threads: 13

6 Months Ago

0

This seems to work fine in IE, FF, and Chrome

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="test.css" />

</head>
<body>

<div id="left">

</div>

<div id="right">

</div>

<div id="center">

</div>

</body>
</html>

CSS:

div
{
	border: 1px dotted red;
	width: 200px;
	height: 500px;
}

#right
{
	float: right;
}

#left
{
	float: left;
}

#center
{
	border: 1px dotted green;
	margin: 0 auto;
}

stbuchok

Master Poster

730 posts since May 2011

Reputation Points: 120

Solved Threads: 93

6 Months Ago

0

I believe this works in plain, but maybe it didn't work for me on real site, I mean there were more css code, maybe some other had influence, don't know.

But its all good now, no need to solve a problem if its solved :)

SPeed_FANat1c

Posting Whiz in Training

295 posts since Apr 2010

Reputation Points: 13

Solved Threads: 13

6 Months Ago

0

The two divs classes will be same Floatleft and Float right as in the code. The second Div will give the margin left according to page width.

Rauny

Junior Poster in Training

Banned

54 posts since Mar 2011

Reputation Points: 10

Solved Threads: 5

3 divs in a row - how to center the middle div?

This question has already been solved