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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with bottom margin

    I am building a web site where i have two inside wrappers centered on screen using an outside wrapper that has margin left/right auto.
    The structure looks like this

    Code:
    <body>
    
    <div id="outside_wrapper">
    
    <div id="inside_wrapper"></div>
    <div id="sidebar"></div>
    
    </div>
    
    </body>
    
    #outside_wrapper {
    	width: 993px;
    	margin: 25px auto;
    }
    
    #inside_wrapper {
    	width: 823px;
    	height: auto;
    	float: left;
    }
    
    #sidebar {
    	height: auto;
    	width: 155px;
    	margin-top: 224px;
    	float: left;
    	margin-left: 7px;
    }
    I am successful in centering the inside_wrapper and the sidebar with the invisible outside_wrapper but I also want to have a bottom and top margin of 25 px.
    And now the problem - the top margin works without any problem on any browser, but the bottom margin only works with Firefox. All the other browsers (IE 8 and 9beta, Chrome, Safari, Opera) do not recognize the bottom margin.

    I managed to get a bottom margin by giving a concrete height to the outside_wrapper instead of auto but that solution is no good for me since I am building a dynamic gallery and the inside_wrapper changes height depending on the image opened inside it.
    Does someone know of a solution to this problem?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The structure looks like this
    Can we have a link to your page? Or please post your complete HTML (including DOCTYPE)+CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello EnfantSauvage,
    You need to clear your floats.
    Add overflow:auto; to your #outside_wrapper. Have a look at this page to see how that works.

    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outside_wrapper {
    	width: 993px;
    	margin: 25px auto;
    	overflow: auto;
    	background: #ff0; /*for demonstration only*/
    }
    #inside_wrapper {
    	width: 823px;
    	float: left;
    	background: #00f;
    }
    #sidebar {
    	margin: 225px 0 0 830px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="outside_wrapper">
            <div id="inside_wrapper">some site goes here</div>
            <div id="sidebar">some menu goes here</div>
        </div>
    </body>
    </html>
    Last edited by Excavator; 11-16-2010 at 01:21 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    EnfantSauvage (11-16-2010)

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello EnfantSauvage,
    You need to clear your floats.
    Add overflow:auto; to your #outside_wrapper. Have a look at this page to see how that works.
    Thank you very much, that solved my problem.


  •  

    Posting Permissions

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