SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Top margin being ignored

    I'm trying to layout a page with a similar structure to that below. However, the the top margin defined for the content box is being ignored in IE 6. In N6 the top margin appears OK.

    The curious thing is that the top margin appears correctly if I swap the position of the sidebar and content boxes in the HTML.

    ie:
    Code:
    ...
    <div id="content"></div>
    <div id="sidebar"></div>
    ...
    I can swap the position of the 2 boxes but I'd prefer to have things as they are in the html below.

    Am I just missing something obvious?

    Test page html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>2 column check</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    	<style>
    		body {
    			margin: 0px;
    			padding: 0px;
    		}
    		#header {
    			width: 100%;
    			height: 50px;
    			background-color: #cc6600;
    		}
    		#content {
    			width: 400px;
    			height: 400px;
    			background-color: #cccc00;
    			margin: 20px 0px 0px 180px;
    		}
    		
    		#sidebar {
    			position: absolute;
    			left: 0px;
    			top: 70px;
    			width: 150px;
    			height: 250px;
    			background-color: #ffcc00;
    		}
    	</style>
    </head>
    
    <body>
    
    	<div id="header"></div>
    	<div id="sidebar"></div>
    	<div id="content"></div>
    
    </body>
    </html>

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using your code I get this:


    When I add position: absolute; to the style declaration for "content" I get this:


    I don't know what you're trying to accomplish so I don't know which one of these (if either) is correct.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking a look Creole.

    It's the look of the layout 2 that I'm after but I want to avoid setting the position of content absolutely, as it'll then go into it's own z-index, which'll make putting anything in the same flow a real pain in the backside.

    I think I need to do some more experimenting, cheers anyway.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not set the padding-bottom of the header element to 20 then float the content DIV right?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •