Jump to content

How to center floated divs?


corrupshun

Recommended Posts

Don't hate because I didn't use javascript...

(which would be the solution, but I would like to know how to do this in css)

CSS:

body {
background-color: royalblue;
font-family: verdana, arial;
background-image: url(img/bg.gif);
}
#page {
min-width: 800px;
width: 100%;
height: auto;
background-color: blue;
float: left;
}
#preload {
display: none;
}
#banner {
min-width: 800px;
width: 100%;
height: 100px;
background-color: #491519;
background-image: url(img/banner.gif);
background-position: center center;
background-repeat: no-repeat;
float: left;

}
#nav {
min-width: 800px;
width: 100%;
height: 30px;
background-color: black;
text-align: center;
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
.button {
width: 100px;
height: 30px;
background-color: #491519;
color: white;
float: left;
border-right: 1px solid white;
}
.button:hover {
background-color: #3d090d;
}
#body {
min-width: 800px;
width: 100%;
min-height: 250px;
height: auto;
background-color: black;
float: left;
}
.h {
font-size: 40px;
color: #0078ff;
}
.p {
text-indent: 20px;
color: white;
margin: 10px;
line-height: 1.3em;
}
#images {
min-width: 800px;
width: 100%;
height: 179px;
background-color: black;
text-align: center;
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
#images .step1 {
height: 159px;
width: 178px;
margin: 10px 9px 10px 9px;
background-image: url(img/step1.gif);
background-color: white;
float: left;
}
#images .step1:hover {
background-image: url(img/step2.gif);
}

#images .step2 {
height: 159px;
width: 178px;
margin: 10px 9px 10px 9px;
background-image: url(img/step3.gif);
background-color: white;
float: left;
}
#images .step2:hover {
background-image: url(img/step4.gif);
}
#images .step3 {
height: 159px;
width: 178px;
margin: 10px 9px 10px 9px;
background-image: url(img/step5.gif);
background-color: white;
float: left;
}
#images .step3:hover {
background-image: url(img/step6.gif);
}
#images .step4 {
height: 159px;
width: 178px;
margin: 10px 9px 10px 9px;
background-image: url(img/step7.gif);
background-color: white;
float: left;
}
#images .step4:hover {
background-image: url(img/step8.gif);
}
#copy { 
min-width: 800px;
width: 100%;
height: 25px;
background-color: black;
color: white;
text-align: center;
float: left;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Title of Index Page</title>
</head>
<body>
<div id="preload">
<img src="img/step2.gif" />
<img src="img/step4.gif" />
<img src="img/step6.gif" />
<img src="img/step8.gif" />
</div>
<div id="page">
<div id="banner"></div>
<div id="nav">
<div class="button">Home</div>
<div class="button">Signup</div>
<div class="button">Proof</div>
<div class="button">Prizes</div>
<div class="button">FAQ</div>
</div>
<div id="body">
<div class="h">Header</div>
<div class="p">
This is the general place I type however I feel.
</div>
</div>
<div id="images">
<div class="step4"></div>
<div class="step3"></div>
<div class="step2"></div>
<div class="step1"></div>
</div><!--images-->
<div id="copy">
© 2009
</div>
</div>
</body>
</html>

If you make the page you will see that step1 2 and 3 are floated to the left.. I can't seem to center them.. How can I while still keeping them floated? (if they're not floated it don't work)

Link to comment
https://forums.phpfreaks.com/topic/181059-how-to-center-floated-divs/
Share on other sites

text-align center doesn't work because you have taken the elements out of the document flow by floating them, and text-align center only works on elements that are still in the document flow.

 

Auto margins will not work on floated elements.

 

Again, floated elements cannot be centered by themselves. You can only center their containing element.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.