Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Parent/Child issue with <div>

    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?

    Code:
    /*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%;
    	}
    Code:
    <!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 &copy; 2011, benleetaylor.com
    				</footer>
    			</div>
    		</div>
    		</div>
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    108
    Thanks
    22
    Thanked 2 Times in 2 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Hi Benlee,

    Instead of using extra DIV , use following code for your parent CSS

    Code:
    height:1%; /*fix IE floating and parent collapse issue */
    overflow:auto; /*expand parent element according to it's content*/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •