SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    609
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container moving with main div

    Hey All, Hope I explain this right.

    When I try to move the main div (the solid outlined part) the container div (dotted line part) moves with it. I am trying to get the main to be in the middle of the container but when I try to edit just the main div, the container div also drops down. I know its probably something simple I am over looking but I have been at it for a while now.

    Heres the page.
    Code:
    http://wolphewebdesign.com/Clients/Inspection/
    HTML
    Code:
    <body bgcolor="#e8dec3">
    
    
    <div id="container">
    <div class="main">
    
    
    </div><!--Closes main-->
    
    
    </div><!--Closes container-->
    
    </body>
    CSS
    Code:
    #container {
    	width:991px;
    	height:595px;
    	background-image:url(images/bg_03.png);
    	margin: 0 auto;
    	outline:#000 dotted thick;
    	}
    	
    
    	
    .main {
    	background-image: url(images/mid_03.png);
    	width:900px;
    	height:445px;
    	margin-left:45px;
    	margin-top:130px;
    	}
    Thanks
    Thanks In Advance

    David

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I assume you mean you want to vertically center the inner div. The problem you are having is with margin collapse, where the top margin of the inner div hangs out of the container.

    One way to stop this collapse would be to put an invisible top border on the container. E.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Experiment</title>
    <style media="all">
    body {background: #e8dec3}
    
    #container {
    	width:991px;
    	height:595px;
    	background-image:url(images/bg_03.png);
    	margin: 0 auto;
    	outline:#000 dotted thick;
    	border-top: 1px solid #e8dec3;
    }
    	
    .main {
    	background-image: url(images/mid_03.png);
    	width:900px;
    	height:445px;
    	margin-left:45px;
    	margin-top:130px;
    }
    </style>
    	
    </head>
    <body>
    
    <div id="container">
        <div class="main">
        </div><!--Closes main-->
    </div><!--Closes container-->
    
    </body>
    </html>

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,220
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    After you get control of the containers, here are a few more items that you may be interested in:

    Code:
    div#topR has a  height:125px  that is not needed and can be deleted.
    
    p.header needs  margin:20px 0 0;  (the margin-top positions it down from the top of the box and the bottom needs the 0)
    
    div#menu has a  margin-bottom:25px  that should be deleted.
    
    #menu ul  could use some margin and padding treatment:
              padding:0;         (lists have default padding-left and default vertical margins.)
              margin:10px 0 0;   (the margin-top positions it down from the bottom of the paragraph)
    
    #menu ul li  could use some margin treatment, too:
              margin:0 7px;      (balances/centers the list beneath the paragraph; it's a few px offset right now.)
    Cheers.


Bookmarks

Posting Permissions

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