...

View Full Version : Vertical spacing between div's



nakins
12-14-2007, 07:34 PM
Hi,
I'm stumped. I'm trying to get a div to butt up to a div above it. I didn't want to position the div with negative margins or by top. I thought it would flow directly under the top div without any other coding besides setting the margin's to 0. What I'm I doing wrong?

<html>
<body style="margin:0; padding:0;">
<div style="background-color:Red; margin:0; padding:0; width:100%; height:40px; position:relative;">
</div>
<div style="background-color:yellow; padding:0; margin:0; position:relative;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</p>
</div>
</body>
</html>

jcdevelopment
12-14-2007, 08:04 PM
* {
margin:0px;
padding:0px;
}




put this in, this worked for me

_Aerospace_Eng_
12-14-2007, 08:09 PM
Your assumption is correct but what you are seeing is the top margin for the paragraph. This example illustrates this quite well.

<!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>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#FFF;
color:#000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#top {
background:#F00;
height:40px;
}

#bottom {
background:#FF0;
}

#bottom p {
margin:0;
padding:10px;
}
#bottom2 {
background:#FF0;
}
#bottom2 p {
padding:10px;
background:#008000;
}
</style>
</head>
<body>
<div id="top"> </div>
<div id="bottom">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean rutrum. Quisque risus urna, fringilla at, aliquet sit amet, eleifend a, dui. Phasellus consectetuer, sem et laoreet pharetra, felis mi sollicitudin turpis, sit amet adipiscing diam tortor congue velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla arcu orci, sollicitudin eget, gravida suscipit, dictum ac, mauris. Suspendisse potenti. Nullam accumsan, est quis volutpat porttitor, nunc erat euismod dolor, in porttitor eros turpis non enim. Nulla et felis vitae dolor varius semper. Maecenas pulvinar. Suspendisse cursus. Nulla eleifend magna a neque. In risus. Sed mollis aliquet felis. Mauris risus. </p>
<p> Cras laoreet pretium ante. Pellentesque bibendum dapibus nisi. Praesent quis est nec neque venenatis eleifend. Nunc rutrum. Sed quam risus, consectetuer eget, blandit eget, tristique et, metus. Quisque imperdiet libero sed odio. Mauris odio risus, porta vitae, pretium vitae, convallis ut, diam. Morbi consequat arcu mollis arcu. Mauris ante nulla, porttitor ullamcorper, laoreet nec, facilisis sit amet, urna. Mauris molestie. In hac habitasse platea dictumst. Donec porttitor. Nam ipsum libero, molestie feugiat, convallis a, malesuada sed, nunc. </p>
<p> In eget eros. In hac habitasse platea dictumst. Morbi semper. Duis ultricies porttitor libero. Morbi non orci ac lacus interdum ornare. Fusce in dui. Morbi vitae nisl. Cras aliquet. Ut id pede. Etiam fermentum sem eu purus. Sed pede. </p>
</div>
<div id="bottom2">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean rutrum. Quisque risus urna, fringilla at, aliquet sit amet, eleifend a, dui. Phasellus consectetuer, sem et laoreet pharetra, felis mi sollicitudin turpis, sit amet adipiscing diam tortor congue velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla arcu orci, sollicitudin eget, gravida suscipit, dictum ac, mauris. Suspendisse potenti. Nullam accumsan, est quis volutpat porttitor, nunc erat euismod dolor, in porttitor eros turpis non enim. Nulla et felis vitae dolor varius semper. Maecenas pulvinar. Suspendisse cursus. Nulla eleifend magna a neque. In risus. Sed mollis aliquet felis. Mauris risus. </p>
<p> Cras laoreet pretium ante. Pellentesque bibendum dapibus nisi. Praesent quis est nec neque venenatis eleifend. Nunc rutrum. Sed quam risus, consectetuer eget, blandit eget, tristique et, metus. Quisque imperdiet libero sed odio. Mauris odio risus, porta vitae, pretium vitae, convallis ut, diam. Morbi consequat arcu mollis arcu. Mauris ante nulla, porttitor ullamcorper, laoreet nec, facilisis sit amet, urna. Mauris molestie. In hac habitasse platea dictumst. Donec porttitor. Nam ipsum libero, molestie feugiat, convallis a, malesuada sed, nunc. </p>
<p> In eget eros. In hac habitasse platea dictumst. Morbi semper. Duis ultricies porttitor libero. Morbi non orci ac lacus interdum ornare. Fusce in dui. Morbi vitae nisl. Cras aliquet. Ut id pede. Etiam fermentum sem eu purus. Sed pede. </p>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum