PDA

View Full Version : Can't get a div inside a div



Goonky
09-20-2010, 02:05 AM
Hi all,

Very new to CSS. Currently reading "CSS, The Missing Manual". Overall, it's been good, but I can't get this to look right.

I want these four boxes - which I tagged as div's inside a larger div. I believe it's something that I don't understand with floats, but I'm not sure how to solve it. Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Background Images</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">

body {
background-color:#006699;
}

h3 {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:25px;
}

h4 {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-weight:bold;
font-size:16px;
}

p {
font-family:Arial, Helvetica, sans-serif;
color:#003F84;
font-weight:bold;
font-size:15px;
}


.container {

width:940px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin:0 0 0 100px;
padding:25px 25px 25px 25px;

}

.box1 {

float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: 40px ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;

}

.box2 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;

}

.box3 {
float:left;
width: 200px;
height:310px;
text-align:center;
margin-top:75px;
margin-left: auto ;
margin-right: auto ;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 1px solid #6D7B8D;

}



.box4 {
float:left;
width: 225px;
height:360px;
text-align:center;
margin: 50px 0px 0 -2px;
background-color:#E6E6E6;
padding: 5px 5px 5px 5px;
border: 2px solid #6D7B8D;

}

.box hr {
background-color:#6D7B8D;
height:1px;
}

.bigbox hr {
background-color:#6D7B8D;
height:1px;
}





</style>
</head>
<body>


<div class="container">

<div class="box1">
<h3>
FREE
<br>
$0
<hr>
<h4>
5 Levels of Access
</h4>
<p>
Just want to look around?
</p>
<br>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</div>

<div class="box2">
<h3>
MONTHLY
<br>
$9.95
<hr>
<h4>
Full Access for 1 Month
</h4>
<p>
Need to cram for an upcoming audition?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>




<div class="box3">
<h3>
ANNUAL
<br>
$59.95
<hr>
<h4>
Full Access for 1 Year
</h4>
<p>
Want to become a Sight Singing Zen Master?
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>


<div class="box4">
<h3>
EDUCATOR
<br>
$99.95
<hr>
<h4>
Full Access for 1 Year
<br>
All Reproducible ebooks
<br>
Online Quizzes
</h4>
<p>
Help your students become AMAZING Sight Singers!
</p>
<img src="images/redsignup.png">
<br>
<a href="http://thepracticeroom.net">Learn more...</a>
</h3>
</div>

</div>

</body>

</html>

I've attached a picture of what it looks like now. I just want the four gray boxes inside the box with the black border.

What am I doing wrong?

Thanks in advance for any help.

jimhill
09-20-2010, 02:18 AM
Add the display:inline



.container {
display:inline;
width:940px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin:0 0 0 100px;
padding:25px 25px 25px 25px;

}

Goonky
09-20-2010, 02:35 AM
Thank you for your help. That actually didn't work. It made the box with the black border disappear.

I tried overflow:hidden, and that seemed to do it.

DrDOS
09-20-2010, 02:40 AM
If something is a container of several other elements you can simplify things by giving it an ID, which is preferable for several reason. Then you can code it like this:

#container div

or ever better

#container div.box {float:left}

then you can use javascript get element by ID, get element by tag name. If you give the boxes IDs you can further specify.