Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Vertical spacing between div's

    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>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    * {
    margin:0px;
    padding:0px;
    }
    put this in, this worked for me

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your assumption is correct but what you are seeing is the top margin for the paragraph. This example illustrates this quite well.
    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •