Welcome to WebmasterWorld Guest from 54.226.189.112

Forum Moderators: not2easy

Message Too Old, No Replies

test centered in a floated div

     

dupalo

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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

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

WebmasterWorld Senior Member 10+ Year Member



Hi there dupalo,

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

birdbrain

dupalo

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



understood. thanks : - )

birdbrain

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

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)

birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month