Solved

issue with floats

Posted on 2011-03-14
6
272 Views
Last Modified: 2012-05-11
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
Comment
Question by:brightsusan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 35130971
I'm seeing essentially that behavior.  The custom div is immediately below the content-left div.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35131090
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
 

Author Comment

by:brightsusan
ID: 35131578
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!

 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35131663
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
 

Accepted Solution

by:
brightsusan earned 0 total points
ID: 35131875
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
 

Author Closing Comment

by:brightsusan
ID: 35170991
The issue was not with the css but with the html code
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question