...

View Full Version : divs overlapping problem



johnish
12-01-2008, 10:11 AM
hey guys i have a slight problem i have like a rounded square layout



<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


#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

effpeetee
12-01-2008, 11:51 AM
We really need all your code. html and css or better still a link to the site.

Frank

GardenGnome2
12-01-2008, 12:45 PM
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.

Excavator
12-01-2008, 05:33 PM
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.

<!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:
#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;
}

johnish
12-02-2008, 05:35 AM
its not on the internet at the moment, but this code from the above post



<!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/g133/johnnish/?action=view&current=Picture4.png
http://s55.photobucket.com/albums/g133/johnnish/?action=view&current=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

jhaycutexp
12-02-2008, 05:44 AM
just add this to your style sheet



*{margin:0;
padding:0;
}


that should get those unwanted spaces between your div elements..

Excavator
12-02-2008, 06:52 AM
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?

johnish
12-02-2008, 07:28 AM
thanks so much for support, its all better ... lol :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum