www.webdeveloper.com
Results 1 to 5 of 5

Thread: margin problem

  1. #1
    Join Date
    Jul 2012
    Posts
    8

    margin problem

    hello people!
    So I'm creating this website and I want to create a first div in wich the background color is navy, and another inside the first div were instead the background color is white and the second div contains all the content of the website, unfortunately everytime I set the margin for the second div, all the website contents get all influenced by the div margin, please help!!!

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there cesaroski,

    and a warm welcome to these forums.

    Instead of setting "margin" to the second div, set "padding" to the first div.

    Hers is a basic example...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #first-div {
        width:760px;
        padding:20px;
        margin:auto;
        background-color:#000080;
     }
    #second-div {
        padding:20px 20px 0;
        background-color:#fff;
     }
    #second-div p {
        margin:0;
        padding-bottom:20px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="first-div">
    
    <div id="second-div">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Jul 2012
    Posts
    8
    I tried but unfortunately it does the same thing all the content of the website gets shifted in on the right if I apply padding-left, or viceversa if I apply padding-right...

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    How about being "fluid" and "responsive" ?

    Are you stuck on "pixel control" of yore? Have you thought about using percentages and letting your layout adjust to different screen sizes? Such as

    Code:
    html { margin: 0; padding: 0; color: black; 
    background:  url(miscImages/gradLeftSide.png) repeat-y left,   url(miscImages/gradRightSide.png) repeat-y right #69c;
    /*aliceBlue rgb(240,248,255) #F0F8FF*/}
    
    body { margin: 20px; padding: 0; text-align:center; color: #000033;
    	background: rgba(240,248,255,0.50)  url(postOffice/Untitled-1.png) no-repeat top center; -moz-background-size:70% auto;
    background-size:70% auto; }
    
    @media only screen and (orientation:portrait)
    	{ 	/* portrait mode */
    	#wrap,  #showpics, #container, #footer. .textbox { width:768px; }
    }
    
    #wrap { color: #000033; margin: 20px auto; width: 95%; max-width:1000px; min-width: 200px;  position: relative;  z-index:300; background: rgba(255,255,255, 0.50);  }
    #container { width: 100%; max-width:900px; min-width: 150px; position: relative; display: block; margin: auto; overflow:autopadding: 6px; background: rgba(255,255,255, 0.50); } 
    
    #header { width: 100%; max-width:1000px; min-width:300px;  margin: 10px auto; display:block;  padding: 0; border: none; position: relative; background:transparent; clear:both; }
    #header img { display: inline-block; width: 60%; max-width:950px; min-width:250px; height:auto; }

  5. #5
    Join Date
    Jul 2012
    Posts
    8
    Thanks to everyone, finally I managed to fix my problem by restarting the website stylesheet form scratch.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles