Parent/Child issue with <div> [Archive]

benleetaylor

07-11-2011, 05:00 AM

Hello,

I'm fairly new to CSS and HTML, so there's probably a relatively simple solution to my problem. I did search Google and the forums, but I was unable to find a problem similar to my own, so here it goes.

I recently set up my personal website — http://benleetaylor.com — and I'm experiencing some parent/child issues with the <div> tag. I have written the CSS and HTML so that all of the content on the page should be contained under the parent <div id="container">, but for some reason I cannot get <div id="content">, <div id="page">, and <div id="rightbar"> to cooperate as children of the the "container" parent. I want these three ids to follow the rules of the "container" parent (ie. background color, margins, etc.).

You can visit the site and inspect its elements to get a better idea of what I mean, and I'll also leave a copy of the CSS and HTML code below. What am I doing wrong?

/*CSS by Ben Lee Taylor*/

html, body
{
font-size: 12px;
text-align: justify;
font-family: "Lucida Console", Monaco, monospace;
background-color: #EEE5DE;
margin: 0;
padding: 0;
}

h1 {font-variant: small-caps;}
h2 {font-style: oblique; font-size: 100%; font-weight: 100;}
h3 {font-style: italic;}

ul.other
{
list-style-type: circle;
padding-left: 50px;
}
ul.papers
{
list-style-type: none;
padding-left: 25px;
font-variant: small-caps;
}

hr {width: 100%;}

.textborder
{
font-family: "Garamond","Times New Roman", Times, serif;
border-style: solid;
border-width: thin;
}

div#rightbar
{
float: right;
width: 15%;
padding: 10px;
}

div#nav
{
height: 50px;
text-align: center;
}

div#nav ul
{
margin: 0;
padding: 0;
}

div#nav ul li
{
display: inline;
list-style-type: none;
}

div#container
{
width: 80%;
background-color: #FFF5EE;
margin: 50px auto 0;
padding: 10px;
height: 100%;
}

div#content
{
background-color: #FFF5EE;
padding: 10px 10px 0;
}

div#header
{
height: 60px;
padding: 20px;
text-align: center;
}

div#footer
{
margin-bottom: 50px;
font-size: 10px;
}

div#page
{
float: left;
width: 80%;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="blt.css"/>
<title>Ben Lee Taylor</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Ben Lee Taylor</h1>
</div>
<div id="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="papers-articles.html">PAPERS & ARTICLES</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</div>
<div id="content">
<div id="rightbar">
testing sidebar
</div>
<div id="page">
<p>This should be in 12 point, monospace font.</p>
<div class="textborder">
<p>This is text with a thin, solid border. The text should also be in a serif font, rather than a monospace font.</p>
</div>
<hr/>
<div id="footer">
<footer>
Unless otherwise stated, all uploaded content original work of Ben Lee Taylor © 2011, benleetaylor.com
</footer>
</div>
</div>
</div>
</div>
</body>
</html>

mehere8

07-11-2011, 09:04 AM

Hi benleetaylor

it is a floating problem: a div containing a floating item whose height exceeds its parent will not enclose its children entirely. the div will shrink into a line with its children sticking out of the box.

several ways to solve it:
1. making your 'container' float left
2. append an empty div with 'clear:both' to the end of 'container' 's children.

if you are using IE8 as the test browser, you can simply press F12 to open the developer's tool. By clicking each element(tag) on the left panel, a blue box will show in the browser, helping you figure out how the element is laid out and saving time debugging.