?
Solved

issue with floats

Posted on 2011-03-14
6
Medium Priority
?
277 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month15 days, 10 hours left to enroll

743 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