Solved

Order of appearance for DIVs with float: left

Posted on 2009-05-07
7
197 Views
Last Modified: 2012-05-06
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
Comment
Question by:bbdesign
[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
  • 3
7 Comments
 
LVL 10

Expert Comment

by:ALaRiva
ID: 24330125
Left one should be set to float:left;

Right one should be set to float:right;
0
 

Author Comment

by:bbdesign
ID: 24330236
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
 
LVL 42

Expert Comment

by:David S.
ID: 24330323
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
Industry Leaders: 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!

 

Author Comment

by:bbdesign
ID: 24330588
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
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24330747
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
 

Author Comment

by:bbdesign
ID: 24330891
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
 
LVL 42

Expert Comment

by:David S.
ID: 24332938
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Cannot center boxes on mobile, but looks good on desktop 9 56
100% tall div not scrollable on iPhone 3 26
Are these icons a web font? 3 23
Why "Mobile First"? 5 35
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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 tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

735 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