PDA

View Full Version : Question about divs being inside of other divs


Andromeda
05-26-2007, 07:25 AM
Why do my divs "faq1" and "faq2" overlap the bottom of "content"?

Surely being inside the content div the other two divs would force the content to get longer????

http://www.wtl.org.nz/newfaq.html

Andromeda
05-26-2007, 11:01 AM
Still not sure why the divs don't force the parent div to expand but a simple clear does the trick - but you lot probably knew that anyway!

.... must stop talking to myself.

markthedoc
05-27-2007, 11:49 AM
Where did you put the clear? (just out of interest)

Andromeda
05-27-2007, 07:35 PM
Just before the footer div.

edbr
05-31-2007, 08:18 AM
#faq1 {width:300px; float:left; margin-left:20px; position:relative;}

#faq2 {width:300px; float:right; margin-right:20px; position:relative;}

try clearing these

chriskq
05-31-2007, 10:27 AM
and cleared


<!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" xml:lang="en" lang="en">
<head>
<title>Clearing</title>
<style type="text/css">
body {
margin: 0;
padding: 0px;
border: none;
background: #333333;
font: normal 0.75em verdana,helvetica,sans-serif;
color: #000;
text-align: center;
margin: 0 auto;
}
#globalWrap {
display: block;
width: 800px;
margin: 0px auto;
padding: 0;
text-align: left;
background: #fff;
}
.wrapper {
padding: 20px;
}
.cDiv {
clear: left;
}
#faq1 {width:300px;height:300px; float:left; margin-left:20px; position:relative;border:2px solid red;}
#faq2 {width:300px;height:300px; float:right; margin-right:20px; position:relative;border:2px solid blue;}
.innerFaq {postion:absolute;height:20px;width:200px;margin:2 0px;border:4px solid green;background:#ccc;}
.imClearing {width:100px;height:100px;border:5px solid pink;margin:20px auto;)
</style>
</head>

<body>
<div id="globalWrap">
<div class="wrapper">
<div id="faq2">
<div class="innerFaq">Heading</div>
</div>
<div id="faq1">
<div class="innerFaq">Heading</div>
</div>
<div class="cDiv"></div>
<div class="imClearing">&nbsp;&nbsp;and centered</div>
</div>
</div> <!-- end globalWrap //-->
</body>
</html>

chriskq
05-31-2007, 10:30 AM
and cleared :-D


<!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" xml:lang="en" lang="en">
<head>
<title>Clearing</title>
<style type="text/css">
body {
margin: 0;
padding: 0px;
border: none;
background: #333333;
font: normal 0.75em verdana,helvetica,sans-serif;
color: #000;
text-align: center;
margin: 0 auto;
}
#globalWrap {
display: block;
width: 800px;
margin: 0px auto;
padding: 0;
text-align: left;
background: #fff;
}
.wrapper {
padding: 20px;
}
.cDiv {
clear: left;
}
#faq1 {width:300px;height:300px; float:left; margin-left:20px; position:relative;border:2px solid red;}
#faq2 {width:300px;height:300px; float:right; margin-right:20px; position:relative;border:2px solid blue;}
.innerFaq {postion:absolute;height:20px;width:200px;margin:2 0px;border:4px solid green;background:#ccc;}
.imClearing {width:100px;height:100px;border:5px solid pink;margin:20px auto;)
</style>
</head>

<body>
<div id="globalWrap">
<div class="wrapper">
<div id="faq2">
<div class="innerFaq">Heading</div>
</div>
<div id="faq1">
<div class="innerFaq">Heading</div>
</div>
<div class="cDiv"></div>
<div class="imClearing">&nbsp;&nbsp;and centered</div>
</div>
</div> <!-- end globalWrap //-->
</body>
</html>

Andromeda
06-01-2007, 06:29 AM
Thank you Ed and Chris. I appreciate you taking the time to help me.