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