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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    From <table> to <div>, assistants needed.

    Hello all;

    I'm relatively new to the concept of using <div> instead of <table>'s, but I'm jumping on the bandwagon. As doing so I've ran into allot of problems and usually a google search and just some messing around with code would help me figure them out. But I can't figure this one small and yet large layout/design bug.

    The design of my site is: header, wrapper, content, sidebar, footer.
    The problem is within the wrapper. The wrapper holds both the content and sidebar together, so if either the content or sidebar data is longer then the other, the wrapper acts as filler and connects everything to the footer.

    http://eightofiveam.com/image/805bug.jpg
    That's how the site displays.
    Here is the HTML code:
    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" />
    		<meta name="generator" content="Adobe GoLive" />
    		<title>Eightofiveam</title>
    		<link href="css/basic.css" rel="stylesheet" type="text/css" media="screen" />
    		<style type="text/css">
    /*<![CDATA[*/
    	div.c1 { clear: both; }
    /*]]>*/
    </style>
    	</head>
    
    	<body>
    
    <!-- begin header -->
    <div id="logo">
    	<div id="header">
    		<h1><a href="#">Name</a></h1>
    		<h2>blah blah blah</h2>
    	</div>
    </div>
    
    <div id="menu">
    	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Art</a></li>
    	<li><a href="#">Blog</a></li>
    	<li><a href="#">About Me</a></li>
    	<li><a href="#">Contact</a></li>
    	</ul>
    </div>
    <!-- end header -->
    
    <!-- begin wrapper -->
    <div id="wrapper">
    <!-- begin content -->
    <div id="content">
    
    <h2><a name="perrault">Little Red Riding Hood</a></h2>
    <h3>Charles Perrault</h3>
    
    Once upon a time there lived in a certain village a little country girl,
    the prettiest creature who was ever seen. Her mother was excessively fond
    of her; and her grandmother doted on her still more. This good woman had a
    little red riding hood made for her. It suited the girl so extremely well
    that everybody called her Little Red Riding Hood.
    <p>One day her mother, having made some cakes, said to her, "Go, my dear,
    and see how your grandmother is doing, for I hear she has been very ill.
    Take her a cake, and this little pot of butter."</p>
    <p>Little Red Riding Hood set out immediately to go to her grandmother,
    who lived in another village.</p>
    <p>As she was going through the wood, she met with a wolf, who had a very
    great mind to eat her up, but he dared not, because of some woodcutters
    working nearby in the forest. He asked her where she was going. The poor
    child, who did not know that it was dangerous to stay and talk to a wolf,
    said to him, "I am going to see my grandmother and carry her a cake and a
    little pot of butter from my mother."</p>
    <p>"Does she live far off?" said the wolf</p>
    <p>"Oh I say," answered Little Red Riding Hood; "it is beyond that mill
    you see there, at the first house in the village."</p>
    <p>"Well," said the wolf, "and I'll go and see her too. I'll go this way
    and go you that, and we shall see who will be there first."</p>
    <p>The wolf ran as fast as he could, taking the shortest path, and the
    little girl took a roundabout way, entertaining herself by gathering nuts,
    running after butterflies, and gathering bouquets of little flowers. It
    was not long before the wolf arrived at the old woman's house. He knocked
    at the door: tap, tap.</p>
    
    </div>
    <!-- end content -->
    
    <!-- begin sidebar -->
    <div id="sidebar">
    
    <h2><a name="perrault">Little Red Riding Hood</a></h2>
    <h3>Charles Perrault</h3>
    
    Once upon a time there lived in a certain village a little country girl,
    the prettiest creature who was ever seen. Her mother was excessively fond
    of her; and her grandmother doted on her still more. This good woman had a
    little red riding hood made for her. It suited the girl so extremely well
    that everybody called her Little Red Riding Hood.
    <p>One day her mother, having made some cakes, said to her, "Go, my dear,
    and see how your grandmother is doing, for I hear she has been very ill.
    Take her a cake, and this little pot of butter."</p>
    <p>Little Red Riding Hood set out immediately to go to her grandmother,
    who lived in another village.</p>
    
    </div>
    <!-- end sidebar -->
    
    </div>
    <!-- end wrapper -->
    
    <div style="clear: both;"></div> 
    
    <!-- begin footer -->
    <div id="footer">
    	<p id="legal">&copy;2008 Eightofiveam. All Rights Reserved<br />
    		Designed by <a href="#">blah</a></p>
    	<p id="links"><a href="#">Privacy</a> | <a href="#">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
    </div>
    <!-- end footer -->
    
    </body>
    </html>
    And the CSS code:
    Code:
    body { background-color: #d6ca00; margin: 0 ; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; }
    h1, h2, h3 { margin: 0; font-weight: normal; color: #000000; }
    h1 { font-size: 197%; }
    h2 { font-size: 127%; }
    h3 { font-size: 100%; font-weight: bold; }
    p, ol, ul { line-height: 180%; }
    ol { margin-left: 0; padding-left: 0; list-style-position: inside; }
    ul { margin-left: 0; padding-left: 0; list-style: none; }
    blockquote { margin: 0; padding-left: 20px; font-style: italic; }
    blockquote * { line-height: normal; }
    a:link { color: blue; }
    a:visited { color: purple; }
    a:hover { color: purple; }
    a:active { color: red; }
    /* header  */
    #logo { background-color: #ff813c; width: 750px; height: 277px; margin: 0 auto; }
    #logo a { text-decoration: none; color: #fbfafa; }
    #header h1 { margin-right: 5px; text-transform: uppercase; font-weight: normal; text-align: right; }
    #header h1 { padding-top: 200px; font-size: 200%; }
    #header h2{ font-size: 3.4mm; margin-right: 5px; text-transform: capitalize; font-weight: normal; text-align: right; }
    #menu { background-color: #858585; width: 750px; height: 106px; margin: 0 auto; padding: 0; }
    #menu ul { margin: 0; padding: 0; list-style: none; }
    #menu li { display: inline; }	
    #menu a { display: block; float: left; padding: 40px 25px 0; text-decoration: none; font-size: 136%; color: #fbfafa; }
    #menu a:hover { text-decoration: underline; }
    /* wrapper */
    #wrapper { background-color: #00969c; width: 750px; margin: 0 auto; }
    /* content */
    #content { background-color: #57a854; float: right; width: 440px; padding: 30px; border: solid 1px #e6e6e6; }
    /* Sidebar */
    #sidebar { background-color: #00b48d; float: left; width: 248px; }
    /* Footer */
    #footer { background-color: #ff916e; width: 750px; margin: 0 auto; height: 100px; padding: 20px 0 0; }
    #footer p { margin: 0; line-height: normal; font-size: 85%; }
    #footer a { color: #666666; }
    #legal { float: left; }
    #links { float: right; }
    I would really appreciate some feed back, or even if you know a better way to go about coding the site.

    Thanks
    Iews
    Attached Thumbnails Attached Thumbnails From &lt;table&gt; to &lt;div&gt;, assistants needed.-805bug.jpg  

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Google faux columns

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I believe your problem is related with clearing floats. You have an empty div with clear:both, but placed after #wrapper. Change
    Code:
    </div>
    <!-- end sidebar -->
    
    </div>
    <!-- end wrapper -->
    
    <div style="clear: both;"></div>
    to
    Code:
    </div>
    <!-- end sidebar -->
    <div style="clear: both;"></div>
    </div>
    <!-- end wrapper -->
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    I believe your problem is related with clearing floats. You have an empty div with clear:both, but placed after #wrapper. Change
    Code:
    </div>
    <!-- end sidebar -->
    
    </div>
    <!-- end wrapper -->
    
    <div style="clear: both;"></div>
    to
    Code:
    </div>
    <!-- end sidebar -->
    <div style="clear: both;"></div>
    </div>
    <!-- end wrapper -->
    jlhaslip;
    I'm looking into Faux Columns, it's neat to know.
    Thanks for pointing it out.

    And
    abduraooft;
    Thank you! I would of never thought of that...
    It seems to work like a charm now.


  •  

    Posting Permissions

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