This is driving me nuts: div appearing outside other div

nbaumann00 · #1 (**permalink**) 10-26-09, 06:59 PM

If you look here you will see that the red boxes are appearing outside the white area and over the footer. I'm not able to get those in the white content area, it's become very annoying.

Below is my code:

HTML 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<title>Scenes | <?php echo $title; ?></title>
<link rel="stylesheet" href="template/style.css" type="text/css"/>
</head>
<body>
<div id="mainContainer">
    <div id="mainHeader">Header</div>
    <div id="topNav">top nav</div>
    <div id="content">
        <div id=catList>
            <div class="catBox">dfs</div>
            <div class="catBox">dfs</div>
            <div class="catBox">dfs</div>
       </div>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>

HTML Code:

body {
	margin-top: 0px;
	background-color: #B1946C;
}

#mainContainer {
	width: 750px;
	margin: 0 auto;
}

#mainHeader {
	background-color: #FF0;
	min-height: 91px;
}

#topNav {
	min-height: 30px;
	color: #ffffff;
	background-color: #000;
}

#content {
	background-color: #FFF;
}

#catList {
	width: 710px;
}

#catList .catBox {
	float: left;
	width: 170px;
	background-color: #F00;
	min-height: 180px;
	margin-left: 10px;
}

#footer {
	width: 100%;
	min-width: 750px;
	background-color:#0F6;
}

What am I doing wrong? Help is much appreciated!

Thanks

ruteckycs · #2 (**permalink**) 10-27-09, 02:58 AM

#catList .catBox {
float: left;
width: 170px;
background-color: #F00;
min-height: 180px;
margin-left: 10px;
}

A container will not expand if it has a floating DIV in it. Remove the Float element.

nbaumann00 · #3 (**permalink**) 10-27-09, 10:49 AM

Ok I tried that and now at least it expands but the catBox divs appear under each other and not left to right.

ruteckycs · #4 (**permalink**) 10-27-09, 01:46 PM

Is absolute positioning an option?

nbaumann00 · #5 (**permalink**) 10-27-09, 02:39 PM

Well essentially every red box is going to be an image category of a gallery read from a database, so there could be 0 to many red boxes and they should appear on a new line for every 4th category.

wirehopper · #6 (**permalink**) 10-27-09, 03:42 PM

Should have double quotes (no functional impact):

<div id="catList">

Try changing:

#catList .catBox {

to

.catBox {

and I think you need the float.

nbaumann00 · #7 (**permalink**) 10-27-09, 05:10 PM

Having the float makes it so each new div with that class appears on the right of the previous. Wirehopper, the changes you suggested get me back to my original issue.

ruteckycs · #8 (**permalink**) 10-27-09, 06:41 PM

Dont even use a div then ... use a table. For the red boxes that is.

wirehopper · #9 (**permalink**) 10-27-09, 07:06 PM

?

HTML 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<style type="text/css">
body {
	margin-top: 0px;
	background-color: #B1946C;
}

#mainContainer {
	width: 750px;
	margin: 0 auto;
}

#mainHeader {
	background-color: #FF0;
	min-height: 91px;
}

#topNav {
	min-height: 30px;
	color: #ffffff;
	background-color: #000;
}

#content {
	background-color: #FFF;
	height: 700px;
}

#catList {
	width: 710px;
}

.catBox {
	float: left;
	width: 170px;
	background-color: #F00;
	min-height: 180px;
	margin: 10px;
}

#footer {
	width: 100%;
	min-width: 750px;
	background-color:#0F6;
}
</style>
</head>
<body>
<div id="mainContainer">
    <div id="mainHeader">Header</div>
    <div id="topNav">top nav</div>
    <div id="content">
        <div id=catList>
            <div class="catBox">cat 1</div>
            <div class="catBox">cat 2</div>
            <div class="catBox">cat 3</div>
	    <div class="catBox">cat 4</div>
	    <div class="catBox">cat 5</div>
	    <div class="catBox">cat 6</div>
       </div>
    </div>
    <div id="footer">footer</div>
</div>
</body>
</html>

nbaumann00 · #10 (**permalink**) 10-27-09, 08:01 PM

Thanks but this does not fix the problem. Remember, the amount of red boxes depends on the amount of categories. Scroll down here. This is what happens.