Solved

Order of appearance for DIVs with float: left

Posted on 2009-05-07
7
195 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
  • 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
To remove highlight from a "a href" 5 30
Centered Image 2 28
css selector 1 17
Can't get container centered 4 15
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

772 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