Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 207
  • Last Modified:

Order of appearance for DIVs with float: left

I have two sets of DIV tags, both are set to float: left. I would expect the first one to appear to the left of the second, but its happening the opposite way. Browser appears to be displaying the first one to the right of the second. How do you control which is displayed first? The documentation I read on the web seems to indicate it would happen the opposite way of what I'm seeing.

The first set is the left-hand navigation, the second is the main content area of the page. When viewing the code, it seems natural that you would see the navigation first (left) followed by the content area (right).

I'm transitioning from table layouts to CSS, so I'm new at this and maybe I'm just thinking in terms of tables, but the order of the code seems like the nav should come first.
0
bbdesign
Asked:
bbdesign
  • 3
  • 3
1 Solution
 
ALaRivaCommented:
Left one should be set to float:left;

Right one should be set to float:right;
0
 
bbdesignAuthor Commented:
OK, that does fix it, although documentation elsewhere seems to indicate that two left's would fix it. What if I wanted 3, 4 or more lined up next to each other, how could I then do that?
0
 
David S.Commented:
Perhaps you could show us your code?

What you seem to be describing works as expected for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">/* <![CDATA[ */
div {
  float: left;
  border: 2px solid #555;
}
/* ]]> */</style>
</head>
<body>
 
 
<div>
 element 1
</div>
<div>
 element 2
</div>
 
</body>
</html>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
bbdesignAuthor Commented:
The page is here:

http://secure.bbdesign.com/lenoradame/history.asp

I put it back to both being float: left, and you can see the extra space for the nav is being put on the right rather than the left. The photos should be over the white "glow" background, but they are pushed to the left instead. The nav is here:

<div style="float: left; width: 170px;">

</div>

The main content area begins here:

<div style="float: left; width: 830px;">

Thanks!
<!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" xml:lang="en" lang="en">
<head>
<title>Lenora Dame | History</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Lenora Dame" />
<meta name="generator" content="info@lenoradame.com" />
<meta name="copyright" content="Copyright 2009 by Lenora Dame. All rights reserved." />
<meta name="robots" content="all" />
<meta name="revisit-after" content="15 days" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<meta name="audience" content="all" />
<style type="text/css">
body {
		background: #f5f0e2 url("http://secure.bbdesign.com/lenoradame/art/bg_body.jpg") no-repeat center top;
		margin: 0;
		padding: 0;
		text-align: center;
	}
div.wrapper {
		position: relative;
		width: 1000px;
		margin: 0 auto;
		text-align: left;
		font-family: Times New Roman, Times, Georgia, serif;
		color: #86888a;
	}
div.bodytext {
		font-size: 15px;
		line-height: 42px;
	}
div.bodytextsmall1 {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.72mm;
	}
div.bodytextsmall2 {
		font-size: 9px;
	}
a {
	color: #86888a;
	text-decoration: none;
	}
a:visited {
	color: #86888a;
	text-decoration: none;
	}
a:hover {
	color: #a29759;
	text-decoration: none;
	}
</style>
<script language="javascript" type="text/javascript">
window.name='lenoradame';
</script>
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
</head>
<body>
 
<div class="wrapper">
 
<div style="position: absolute; left: 9px; top: 60px;"><a href="index.asp"><img src="art/lg_lenoradame.jpg" width="112" height="17" border="0" alt="Lenora Dame" /></a></div>
 
<div class="bodytextsmall1" style="z-index: 3; position: absolute; left: 287px; top: 64px;"><a href="index.asp">HOME</a></div>
 
<div class="bodytextsmall1" style="z-index: 3; position: absolute; left: 395px; top: 64px;"><a href="jewelry.asp">JEWELRY</a></div>
 
<div class="bodytextsmall1" style="z-index: 3; position: absolute; left: 528px; top: 64px;"><a href="history.asp">HISTORY</a></div>
 
<div class="bodytextsmall1" style="z-index: 3; position: absolute; left: 662px; top: 64px;"><a href="news.asp">NEWS</a></div>
 
<div class="bodytextsmall1" style="z-index: 3; position: absolute; left: 768px; top: 64px;"><a href="wholesale.asp">WHOLESALE</a></div>
 
<div style="z-index: 2; position: absolute; left: 232px; top: 3px;"><img src="art/ic_homeHover.gif" alt="Home" width="71" height="55" border="0" /></div>
 
<div style="z-index: 2; position: absolute; left: 366px; top: 31px;"><img src="art/ic_jewelryHover.gif" alt="Jewelry" width="120" height="67" border="0" /></div>
 
<div style="z-index: 2; position: absolute; left: 503px; top: 2px;"><img src="art/ic_historyHover.gif" alt="History" width="74" height="96" border="0" /></div>
 
<div style="z-index: 2; position: absolute; left: 621px; top: 34px;"><img src="art/ic_pressHover.gif" alt="Press" width="116" height="66" border="0" /></div>
 
<div style="z-index: 2; position: absolute; left: 748px; top: 3px;"><img src="art/ic_wholesaleHover.gif" alt="Wholesale" width="115" height="53" border="0" /></div>
 
<div style="z-index: 1; position: absolute; top: 92px;"><img src="art/gr_dots1000.gif" alt="" width="1000" height="2" border="0" /></div>
 
<div><img src="art/px_trans.gif" width="1" height="116" border="0" alt="" /></div>
 
<div style="float: left; width: 170px;">
 
</div>
 
<div style="float: left; width: 830px;">
 
 
<div align="center"><img src="art/ph_history.jpg" width="724" height="336" border="0" alt="History of Lenora Dame" /></div>
 
<div><img src="art/px_trans.gif" width="1" height="30" border="0" alt="" /></div>
 
<div align="center"><img src="art/gr_dots830.gif" alt="" width="830" height="2" border="0"></div>
 
<div><img src="art/px_trans.gif" width="1" height="18" border="0" alt="" /></div>
 
<div class="bodytext" style="padding: 0px 60px 0px 60px;">Rethinking vintage is how Lenora Dame would describe her approach to jewelry design. A bachelor's degree in history from Dickinson College reinforced her interest in the past. A ten year career in advertising fueled her creativity, but it was the frequent visits to flea markets, antique shops and auctions that were and continue to be the inspiration for an aesthetic that is original, familiar and forward at the same time. Eclectic combinations of old and new materials, wood, glass, textiles, found objects, lucite, paper and twine are commonly found in her unique creations. The unexpected mix of materials and color define stand out pieces for the bold spirited, while more subtle combinations make the line accessible to a broad audience.</div>
 
<div class="bodytext" style="padding: 0px 60px 0px 60px;"><img src="art/px_trans.gif" width="36" height="1" border="0" alt="" />Lenora's designs can be found in many high-end retail shops in the U.S., Europe and Asia. Her studio is located in Chester County PA, where she resides with her husband and two children.</div>
 
<div><img src="art/px_trans.gif" width="1" height="24" border="0" alt="" /></div>
 
<div align="center"><img src="art/gr_dots830.gif" alt="" width="830" height="2" border="0"></div>
 
<div><img src="art/px_trans.gif" width="1" height="18" border="0" alt="" /></div>
 
<div class="bodytextsmall1" align="center"><a href="contact.asp">CONTACT</a><img src="art/px_trans.gif" width="14" height="1" border="0" alt="" />/<img src="art/px_trans.gif" width="14" height="1" border="0" alt="" /><a href="cart.asp">SHOPPING BAG</a><img src="art/px_trans.gif" width="14" height="1" border="0" alt="" />/<img src="art/px_trans.gif" width="14" height="1" border="0" alt="" /><a href="account.asp">MY ACCOUNT</a><img src="art/px_trans.gif" width="14" height="1" border="0" alt="" />/<img src="art/px_trans.gif" width="14" height="1" border="0" alt="" /><a href="signup.asp">JOIN OUR MAILING LIST</a></div>
 
<div><img src="art/px_trans.gif" width="1" height="12" border="0" alt="" /></div>
 
<div class="bodytextsmall2" align="center">&copy 2009 lenora dame<img src="art/px_trans.gif" width="8" height="1" border="0" alt="" /><a href="privacy.asp">Privacy Policy</a><img src="art/px_trans.gif" width="8" height="1" border="0" alt="" />/<img src="art/px_trans.gif" width="8" height="1" border="0" alt="" /><a href="storepolicy.asp">Store Policy</a></div>
</div>
 
</div>
 
</body>
</html>

Open in new window

0
 
David S.Commented:
The first one is empty so its height is collapsing to 0, which causes the browser to ignore it.

That page has an alarming number of inline styles in it. Keeping styles in external stylesheets is a good thing.
0
 
bbdesignAuthor Commented:
OK, I assumed if I specified a width, it would hold the space, even with no content. I guess not.

Also, if a given style is only going to be used one time, is there any sense in adding it to my style sheet? I was thinking it would be easier to read if I didn't have to keep referencing the CSS file, just for a one-time style. Thanks for your help, I am a bit new at this.
0
 
David S.Commented:
You're welcome.

> Also, if a given style is only going to be used one time, is there any sense in adding it to my
> style sheet? I was thinking it would be easier to read if I didn't have to keep referencing the
> CSS file, just for a one-time style.

I would. Inline styles are messy.  Separation of style from content is a good thing.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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