...

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



Goonky
09-20-2010, 01: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, 01: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, 01: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, 01: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum