Solved

issue with floats

Posted on 2011-03-14
6
256 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
  • 3
  • 2
6 Comments
 
LVL 33

Expert Comment

by:paulmacd
Comment Utility
I'm seeing essentially that behavior.  The custom div is immediately below the content-left div.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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
Comment Utility
The issue was not with the css but with the html code
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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 …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now