• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

issue with floats

I am trying to use css divs instead of tables and I am having an issue with floats.

See my page at http://www.brightideaswebdesign.com/newindex.html 

You'll see I have a couple of divs

1.  header - it runs across the top
2.  content-left - should float to the left and the side div should be beside it
3.  side - should float beside content-left and run down the side of the page
4. custom - should run under content-left but have side next to it
5.  featured - should run across the bottom (like a footer)

As you see by looking at the page the content-left div is growing "with" the side div.  I want the custom div to come up under the content for the content-left div.  What do  I need to do for it to work correctly?
0
brightsusan
Asked:
brightsusan
  • 3
  • 2
1 Solution
 
Paul MacDonaldDirector, Information SystemsCommented:
I'm seeing essentially that behavior.  The custom div is immediately below the content-left div.
0
 
Dave BaldwinFixer of ProblemsCommented:
You have to use nested divs to get the behavior you're looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bright Ideas Web Design, Custom Web Design, Oxford, Alabama</title>

<style type="text/css">
<!-- 
@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}

#wrapper{
	background: #fff;
	margin:auto;
	overflow:auto;
	width: 900px;
}

body{
	background: #bfbfbf;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	color: 666;
}

#header{
	background: url(images/header.jpg) no-repeat;
	width: 900px;
	height: 180px;
	position: relative;
	clear:both;
}	

#content-left{
	width:690px;
	float:left;
	padding: 8px;
}

#side{
	width:179px;
	float:left;
	border-left: 1px solid #d3e900;
	padding: 5px;
}	

#custom{
	width: 690px;
	background:#d3e899;
	padding:8px;
	clear:both;
}

#featured{
	width: 900px;
	height: 165px;
	background:url(images/featured.png) repeat-x;
	clear:both;
} 
-->
</style>
</head>

<body>

<div id="wrapper">
  <div id="header">Content for  id "header" Goes Here</div>
<div style="float:left;">  
<div id="content-left">

    <p>Content for  id "content-left" Goes Here</p>
</div>
  <div id="custom">
    <p>This is the custom area</p>
</div>

</div>
  <div id="side">Content for  id "side" Goes HereLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
  <div id="featured">This is the featured area</div>
</div>

</body>
</html>

Open in new window

0
 
brightsusanAuthor Commented:
DaveBaldwin

Isn't that the same as the css I have now???  I don't see anything different and when I copied and pasted it, it is the same result as my css?

paulmacd

Maybe I didn't explain myself well enough.  I want the content and the div of custom to move up under the content and div for content-left.  Right now it is under wherever the side div ends.  As you can see from my page, there is only one line of content in the content-left div so the custom div should be almost at the top of the page instead of down under the side div.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Dave BaldwinFixer of ProblemsCommented:
I made a small change or two and put it in the page to make it easier for me.  I added another <div> with inline style and moved the 'content-left' and 'custom' inside it.  View it in your browser and you should see the difference.
0
 
brightsusanAuthor Commented:
I figured out the issue.  It was with the placement of the divs in the actual html

Here is my current HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Bright Ideas Web Design, Custom Web Design, Oxford, Alabama</title>
<link rel="stylesheet" type="text/css" href="webstyle.css"/>
</head>

<body>

<div id="wrapper">
  <div id="header">Content for  id "header" Goes Here</div>
  <div id="side">
    <p><img src="images/follow-bright-ideas.png" width="175" height="135" alt="follow bright ideas web design" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="images/newsletter-signup.jpg" width="175" height="95" alt="bright ideas e-newsletter" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><img src="images/why-need-website.png" alt="" width="184" height="130" /></p>
  </div>
  <div id="content-left">
    <p>Content for  id "content-left" Goes Here</p>
</div>  <div id="custom">
    <p>This is the custom area</p>
</div>
   <div id="featured">This is the featured area</div>
</div>
</body>
</html>

Open in new window


Here is the current CSS Code:

@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}

#wrapper{
	background: #fff;
	margin:auto;
	width: 900px;
}

body{
	background: #bfbfbf;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	color: 666;
}

#header{
	background: url(images/header.jpg) no-repeat;
	width: 900px;
	height: 180px;
	position: relative;
	clear:both;
}	

#content-left{
	width:694px;
	float:left;
	padding: 8px;
}

#side{
	width:179px;
	float:right;
	border-left: 1px solid #d3e900;
	padding: 5px;
	text-align:center;
}	

#custom{
	width: 694px;
	background:#d3e899;
	padding:8px;
	float: left;
}

#featured{
	width: 900px;
	height: 165px;
	background:url(images/featured.png) repeat-x;
	clear:both;
}

Open in new window

0
 
brightsusanAuthor Commented:
The issue was not with the css but with the html code
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now