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?
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)
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.
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 to less 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.
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.
Centering the center div is simply
margin:0 autoThe 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.
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.
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;
}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 :)
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.
CSS Code
.centerDiv
{
height:200px;
margin: 0 auto;
}
HTML Code
<div class="centerDiv">
</div>
Fill Source code.. Center Div in the middle of the screen
Clint
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.