homepage Welcome to WebmasterWorld Guest from 54.198.42.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
div and %
Lolalola




msg:4033543
 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




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved