1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS - Overlapping div's?

Discussion in 'HTML, Graphics & Programming' started by MagSafe, 25 Jul 2006.

  1. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    Hi :)

    I'm creating a template with the usual css and html 2 column layout within a container, however i seem to have got myself stumpted when inserted more div's below these columns.

    I've uploaded the website here and as you can see the right column (as well as the left column, you just can't tell as theres not enough text) is overflowing right past the footer as well as right past the actual page body and the container div(you can tell when you apply borders).

    I'm hoping someone can spot where I'm going wrong here...as i've been trying for most of the afternoon and just can't solve it :confused:

    Also...if someone fancies a challenge the page doesn't seem to be compatible in Firefox at all :confused:

    I've included the code for whoever wants to muck about with it :)

    Thanks,

    Steven.

    index.htm file
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    	<head>
    		<title>Keep Scotland Beautiful</title>
      		<link type="text/css" rel="stylesheet" href="cms2.css" />
    		<link rel="shortcut icon" href="images/favicon.ico" />
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	</head>
    
    	<body>
    		<div id="container">
    			<div id="header">
    				<div id="header-top">header top test</div>
    				<div id="header-middle">
    					<img src="graphics/scotlandlandscape.jpg" alt="Scotland Landscape" width="700px" height="165px" />
    				</div>
    				<div id="header-bottom"></div>
    			</div>
    			<div id="main-content">
    				<div id="left-content">left content test</div>
    				<div id="right-content">
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    				</div>
    				<div id="footer">footer test</div>
    			</div>
    		</div>
    	</body>
    
    </html>
    cms2.css file
    Code:
    /* Body */
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    	height: 100%;
    	background-color: #ffffff;
    	color: #658dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #container
    {
    	margin: auto;
    	padding: 0px;
    	position: relative;
    	width: 700px;
    	height: 100%;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 203px;
    	top: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-top
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 30px;
    	top: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-middle
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 165px;
    	top: 30px;
    	background-color: #ffffff;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-bottom
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 8px;
    	top: 195px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 8pt verdana, helvetica, san-serif;
    }
    
    #main-content
    {
    	margin: 0px;
    	padding: 0px;
    	width: 700px;
    	height: 100%;
    	top: 203px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #left-content
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 170px;
    	height: 100%;
    	top: 203px;
    	left: 0px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #right-content
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 530px;
    	height: 100%;
    	top: 203px;
    	left: 170px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    	border: 1px solid #659dbd;
    }
    
    #footer
    {
    	margin: auto;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 20px;
    	bottom: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 8pt verdana, helvetica, san-serif;
    }
     
  2. nin9abadga

    Wise Guy

    Joined: 9 Jan 2006

    Posts: 1,440

    Location: Nottingham

    well, you've absolutely positioned the footer which is why everything overlaps over it. you want to either clear the footer and/or not bother with the positioning for it. it doesn't look too bad in FF, some of the margins and borders look a bit strange so it should be reasonably easy to fix.

    hope this helps :)

    nin9a
     
  3. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    Thanks for the reply :)

    I'm not to sure what you mean by clearing the footer? I've tried removing it completey and changing it to position: relative; but that doesn't seem to work either.

    As for the Firefox problems its just the footer has completey disapeared and from what I can see is stuck at the top underneath the header.
     
  4. huppy

    Gangster

    Joined: 6 Jul 2004

    Posts: 465

    clear: both;

    will clear the element from any floated elements above it. I didn't check your code but just what nin9abadga said, should do the trick.
     
  5. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    hmm, i've put that into the footer's div within the css sheet (as well as removing the absolute position with it) and it isn't working :confused:

    here's the footer code:

    Code:
    #footer
    {
    	margin: auto;
    	padding: 0px;
    	position: absolute;
    	clear: both;
    	width: 700px;
    	height: 20px;
    	bottom: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 8pt verdana, helvetica, san-serif;
    }
    thanks again :)
     
  6. huppy

    Gangster

    Joined: 6 Jul 2004

    Posts: 465

    Take out the height: 100% style on the #main-content. Hopefully should sort it ;)
     
  7. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    nope, sorry, it's refusing to budge :(

    I don't suppose someone could test it on there machine and try and tackle it as whatever I do it just doesn't want to work...

    Current code:

    index.htm
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    	<head>
    		<title>Keep Scotland Beautiful</title>
      		<link type="text/css" rel="stylesheet" href="cms2.css" />
    		<link rel="shortcut icon" href="images/favicon.ico" />
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	</head>
    
    	<body>
    		<div id="container">
    			<div id="header">
    				<div id="header-top">header top test</div>
    				<div id="header-middle">
    					<img src="graphics/scotlandlandscape.jpg" alt="Scotland Landscape" width="700px" height="165px" />
    				</div>
    				<div id="header-bottom"></div>
    			</div>
    			<div id="main-content">
    				<div id="left-content">left content test</div>
    				<div id="right-content">
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    					right content test right content test right content test right content test right content test right content test
    				</div>
    				<div id="footer">footer test</div>
    			</div>
    		</div>
    	</body>
    
    </html>
    cms2.css
    Code:
    /* Body */
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    	height: 100%;
    	background-color: #ffffff;
    	color: #658dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #container
    {
    	margin: auto;
    	padding: 0px;
    	position: relative;
    	width: 700px;
    	height: 100%;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 203px;
    	top: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-top
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 30px;
    	top: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-middle
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 165px;
    	top: 30px;
    	background-color: #ffffff;
    	color: #ffffff;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #header-bottom
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 700px;
    	height: 8px;
    	top: 195px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 8pt verdana, helvetica, san-serif;
    }
    
    #main-content
    {
    	margin: 0px;
    	padding: 0px;
    	width: 700px;
    	top: 203px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #left-content
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 170px;
    	height: 100%;
    	top: 203px;
    	left: 0px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    }
    
    #right-content
    {
    	margin: 0px;
    	padding: 0px;
    	position: absolute;
    	width: 530px;
    	height: 100%;
    	top: 203px;
    	left: 170px;
    	background-color: #ffffff;
    	color: #659dbd;
    	font: normal 10pt verdana, helvetica, san-serif;
    	border: 1px solid #659dbd;
    }
    
    #footer
    {
    	margin: auto;
    	padding: 0px;
    	position: absolute;
    	clear: both;
    	width: 700px;
    	height: 20px;
    	bottom: 0px;
    	background-color: #659dbd;
    	color: #ffffff;
    	font: normal 8pt verdana, helvetica, san-serif;
    }
     
  8. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    Only skim-read this thread, but this should work:

    Code:
    #footer
    {
      margin: auto;
      padding: 0px;
      clear: both;
      width: 700px;
      height: 20px;
      background-color: #659dbd;
      color: #ffffff;
      font: normal 8pt verdana, helvetica, san-serif;
    }
    Edit: It would appear nin9abadga was wrong. It would seem, in order for clear to take effect, at least one (preferably both; absolute positioning is messy) of the block-levels elements above must be floated :)
     
    Last edited: 25 Jul 2006
  9. MagSafe

    Wise Guy

    Joined: 12 Aug 2004

    Posts: 1,009

    Location: Glasgow, Scotland

    nope... sorry but that doesn't work either :confused:, like i said it just doesn't want to work

    could anyone copy the code into files and try it on there pc first? , as with this way it just isn't happening

    thanks
     
  10. nin9abadga

    Wise Guy

    Joined: 9 Jan 2006

    Posts: 1,440

    Location: Nottingham

    it's something to do with the positioning and the mix of it.

    try this so you can see how it works:

    left div is floated (im assuming that is for nav?) whilst the right is contained but cleared by a left margin. the content should also stretch depending on what you put in it, ensuring the footer is always underneath the content at the bottom.

    it might not be ideal (someone may have already posted a better idea) but it's a solution that fits what you are trying to do i think. you'll have to modify my suggestions to suit your needs but feel free.

    nin9a