Forum Moderators: not2easy
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
div.body{
margin:0;
padding:0;
}
div.left{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}
div.center{
float: left;
width: 700px;
height: 686px;
background-color: #5292d9;
}
div.banner{
height: 200px;
}
div.right{
float: left;
width: 50%;
height: 686px;
background-color: #336699;
}</style>
</head>
<body>
<div class = "left">
</div>
<div class = "center">
<div class = "banner">
<img src="banner.jpg" />
</div>
</div>
<div class = "right">
</div>
</body>
</html>
However, with regard to: And div "center" always be the center
1) There is no declaration to center <div class="center">.
2) {float: left;} in that declaration ensures that it will be flush left and never centered.
3) To correct: Remove {float: left;} - and then add {margin: 0 auto;}
3B) Given the HTML you will probably want to deal with clearing the previous HTML of <div class="left">, which is floated, with {clear: left;}
4) The following will clear the previous <div> and center the center <div> -
div.center{
/**********float: left;*/
width: 700px;
height: 686px;
background-color: #5292d9;
margin: 0 auto;
clear: left;
}
...........................
NOTE: <div class="right"> has {float: left;} declared in the CSS. Do you intend this?
NOTE: I am concerned that your HTML ordering is not going to result in the results and rendering intended.? However, as asked, I believe that the question is answered correctly.
I think what you meant was to apply this to the body, which will likely make your problem go away. It's likely because although the width is 50%, the padding and margins on the body itself make the body area too narrow for a true "50%."
I would remove the specific selectors, from
div.left
to
.left
So those selectors can be used on other elements as you need them.
I'm also confused as to why "center" is floated left.
To float elements around other elements, put your floats first:
<div class="left">this will float left</div>
<div class="right">this will float right</div>
<div class="center">If there is room between the two, which there won't be at 50%, this would normally display between the two.</div>
When in doubt, put borders on the divs temporarily, but note that this will mess up the "50%" since it's now wider than 50%.. Temporarily reduce the width to 49%;.
Last, only use a class if you foresee these items being reused on the same page - looks to me like ID's will work just fine. An ID is appropriate if the element is unique to each page (i.e., only one named ID per page.)
I'm not sure what you are after here, but to truly center the .center class you'll probably need a wrapper, hence "center-container."
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body,html{
margin:0;
padding:0;
}
#left,#right{
float: left;
width: 49%;
height: 686px;
background-color: #336699;
}
/* remove these two after setting width to 50% */
#left{ border: 1px solid #ff0000; }
#right{ border: 1px solid #00ff00; }
#center-container {
float:left;
width:100%;
}
#center{
margin:auto;
width: 700px;
height: 686px;
background-color: #5292d9;
}
#banner{
/* if you want banner "centered" - img is
an inline element, you may need text-align
center, but not sure, so applying
both here */
margin:auto;
text-align:center;
height: 200px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="center-container">
<div id="center">
<div id="banner">
<img src="banner.jpg" alt = "some-image" />
</div>
</div>
</div>
</body>
</html>
