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 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    64
    Thanks
    25
    Thanked 0 Times in 0 Posts

    divs overlapping problem

    hey guys i have a slight problem i have like a rounded square layout

    Code:
    <div id="wrapper">
    	<div id="top"></div>
        <div id="center">
    <!-- content comes here -->
        </div>
        <div id="bottom"></div>
    </div>
    like so, and when i put things in the center div... if i put more then one <p></p> the bottom is cut off, i think the center div is auto sizing over the bottom div...?

    the css for these id's are
    Code:
    #wrapper{
    	width:751px;
    	height:auto;
    	margin:0 auto;
    }
    #top{
    	background-image:url(images/content-top.gif);
    	background-repeat:no-repeat;
    	height:20px;
    	width:751px;
    }
    #center{
    	background-image:url(images/content-cen.gif);
    	background-repeat:repeat-y;
    	height:auto;
    	width:751px;
    }
    #bottom{
    	background-image:url(images/content-bot.gif);
    	background-repeat:no-repeat;
    	height:10px;
    	width:751px;
    }
    i dont understand why it does that because i close the center tag before i open the bottom tag

    please help

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    We really need all your code. html and css or better still a link to the site.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    From what I see, it doesn't do that. If I don't see your whole code or a link, I'm guessing it could just be your 'z-index' or 'position' if you have some in your complete code.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello johnish,
    In this example I've added a DocType so it will act predictably, a different color to each element and some text to see what it does.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <style type="text/css">
    #wrapper{
    	width:751px;
    	margin:0 auto;
    	background: #0F0;
    }
    #top{
    	height:20px;
    	width:751px;
    	background: #CFF url(images/content-top.gif) no-repeat;
    }
    #center{
    	width:751px;
    	background: #C60 url(images/content-cen.gif) repeat-y;
    }
    #bottom{
    	height:10px;
    	width:751px;
    	background: #06F url(images/content-bot.gif) no-repeat;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="top">header</div>
      <div id="center">
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
        </div>
        <div id="bottom">footer</div>
    </div>
    </body>
    </html>
    Changing the height on the footer, so it will fit the font going in it, fixes the problem you see in that example. Try making the CSS look like this now:
    Code:
    #wrapper{
    	width:751px;
    	margin:0 auto;
    	background: #0F0;
    }
    #top{
    	width:751px;
    	background: #CFF url(images/content-top.gif) no-repeat;
    }
    #center{
    	width:751px;
    	background: #C60 url(images/content-cen.gif) repeat-y;
    }
    #bottom{
    	width:751px;
    	background: #06F url(images/content-bot.gif) no-repeat;
    }
    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

  • #5
    New Coder
    Join Date
    Jun 2008
    Posts
    64
    Thanks
    25
    Thanked 0 Times in 0 Posts
    its not on the internet at the moment, but this code from the above post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="" content="authored by http://www.nopeople.com/Design/" />
    <style type="text/css">
    #wrapper{
    	width:751px;
    	margin:0 auto;
    	background: #0F0;
    	height:auto;
    }
    #top{
    	width:751px;
    	background: #CFF url(images/content-top.gif) no-repeat;
    	height:20px;
    	position:relative;
    }
    #center{
    	width:751px;
    	background: #C60 url(images/content-cen.gif) repeat-y;
    	
    }
    #bottom{
    	width:751px;
    	background: #06F url(images/content-bot.gif) no-repeat;
    	height:10px;
    	position:relative;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="top">header</div>
      <div id="center">
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
    	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
    	   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    	   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
    	   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    	   sea takimata sanctus est Lorem ipsum dolor sit amet.
    	</p>
        </div>
        <div id="bottom">footer</div>
    </div>
    </body>
    </html>
    produced this result

    http://s55.photobucket.com/albums/g1...t=Picture4.png
    and its not supposed to have the green background in it, the top and bottom are meant to be straight after the center

    also when i add height attributes to #top and # bottom, the result doesnt change

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    just add this to your style sheet

    Code:
    *{margin:0;
       padding:0;
      }
    that should get those unwanted spaces between your div elements..

  • Users who have thanked jhaycutexp for this post:

    johnish (12-02-2008)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Look at my post again johnish.
    The color is only there for testing and you can remove it anytime you like.
    The problem is shown in the first bit of code that you copied, the solution is in the second bit.

    If that doesn't work with your content-top/cen/bot.gifs, could you give us the images?
    Last edited by Excavator; 12-02-2008 at 06:57 AM.
    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:

    johnish (12-02-2008)

  • #8
    New Coder
    Join Date
    Jun 2008
    Posts
    64
    Thanks
    25
    Thanked 0 Times in 0 Posts
    thanks so much for support, its all better ... lol


  •  

    Posting Permissions

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