...

View Full Version : From <table> to <div>, assistants needed.



Iews
02-13-2008, 07:55 AM
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
http://eightofiveam.com/image/805bug.jpg (http://www.codingforums.com/attachment.php?attachmentid=6043&stc=1&d=1202885653)
That's how the site displays.
Here is the HTML 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:

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

jlhaslip
02-13-2008, 08:10 AM
Google faux columns

abduraooft
02-13-2008, 08:23 AM
I believe your problem is related with clearing floats. You have an empty div with clear:both, but placed after #wrapper. Change

</div>
<!-- end sidebar -->

</div>
<!-- end wrapper -->

<div style="clear: both;"></div> to

</div>
<!-- end sidebar -->
<div style="clear: both;"></div>
</div>
<!-- end wrapper -->

Iews
02-13-2008, 08:34 AM
I believe your problem is related with clearing floats. You have an empty div with clear:both, but placed after #wrapper. Change

</div>
<!-- end sidebar -->

</div>
<!-- end wrapper -->

<div style="clear: both;"></div> to

</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum