Welcome to WebmasterWorld Guest from 54.167.82.170

Forum Moderators: not2easy

Message Too Old, No Replies

div and %

     

Lolalola

2:34 pm on Nov 29, 2009 (gmt 0)



Hi, how to make that div "left and "rigth" would have 50% empty window. And div "center" always be the center.
Now div make one after another


<!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>

D_Blackwell

7:09 pm on Nov 29, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't believe that I understand the question. Someone else may have a better grasp of your full intentions.

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.

rocknbil

7:23 pm on Nov 29, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



First, what is div.body? This says a div with a class "body" which there is none.

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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month