homepage Welcome to WebmasterWorld Guest from 54.161.166.171
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
test centered in a floated div
dupalo




msg:4432990
 3:40 pm on Mar 24, 2012 (gmt 0)

Hi there, I seem to have a problem with some text centered in a floated div. It just doesn't want to go in the middle of the box for whaterver reason.
Here's the code:
html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>This is a test page</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body>

<div id = "wrapper">
<div id = "A">
<p>A</p>
</div>
<div id = "B">
<p>B</p>
</div>
<div id = "C">
<p>C</p>
</div>
<div id = "D">
<p>D</p>
</div>

</div><!-- END of wrapper-->

</body>
</html>

and CSS

#wrapper
{
border: 1px solid black;
width:100%;
height:900px;
margin: 0 auto;

}

#A
{
border: none;
background-color:pink;
width:50%;
height:450px;
float:left;
text-align:center;
}

#B
{
border: none;
background-color:green;
width:50%;
height:225px;
float:left;
text-align:center;
}

#C
{
border: none;
background-color:blue;
width:50%;
height:225px;
float:left;
text-align:center;


}

#D
{
clear:both;
border: none;
background-color:yellow;
width:100%;
height:450px;
text-align:center;


}

p
{
margin-top: 100px;
}

#A p
{
margin-top: 200px;
}

#D p
{

margin-top:200px;

}

The offending text is the "D". At the moment it is centered but on the top of the dive despite having

#D p
{

margin-top:200px;

}

This thing is driving me insane, why would that happen?
any help much appreciated
thanks

 

rainborick




msg:4433016
 4:19 pm on Mar 24, 2012 (gmt 0)

I believe you're running into a CSS behavior called "collapsing margins", which I truly know nothing about. A quick fix is to give "#D p" an intervening element to work against. I inserted:

<div style="height:1px;"></div>

just after the <div id="D"> tag and got the effect I think you want. But I'm sure the proper method lies somewhere else, so you should investigate collapsing margins and see how they work. Good luck!

birdbrain




msg:4433030
 4:37 pm on Mar 24, 2012 (gmt 0)

Hi there dupalo,

I would code your test page like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>This is a test page</title>

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">
#wrapper {
border:1px solid #000;
height:900px;
text-align:center;
}
#a,#d {
float:left;
width:50%;
height:250px;
padding-top:200px;
background-color:#ffc0cb;
}
#b,#c {
float:left;
width:50%;
height:125px;
padding-top:100px;
background-color:#008000;
}
#c {
background-color:#00f;
}
#d {
clear:both;
width:100%;
background-color:#ff0;
}
p {
margin:0;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="a"><p>A</p></div>
<div id="b"><p>B</p></div>
<div id="c"><p>C</p></div>
<div id="d"><p>D</p></div>

</div><!-- end of wrapper-->

</body>
</html>

birdbrain

dupalo




msg:4433226
 4:56 pm on Mar 25, 2012 (gmt 0)

Birdbrain,
thanks for that, neat trick, didn't think about using the padding property to achieve that.
What if I use the
line-height:xxpx; where xxpx is the pixel value of the div's height? So in other words if I leave my code as it was and give each div a line-height depending on the height? That works fine. Is your code (with the padding) a better solution than using line-height? If yes, why?
thanks

birdbrain




msg:4433235
 5:50 pm on Mar 25, 2012 (gmt 0)

Hi there dupalo,

using line-height is fine, as long as there is only one line of text. ;)

birdbrain

dupalo




msg:4434087
 8:03 pm on Mar 27, 2012 (gmt 0)

understood. thanks : - )

birdbrain




msg:4434125
 9:28 pm on Mar 27, 2012 (gmt 0)

No problem, you're very welcome. ;)

birdbrain

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