Solved

Order of appearance for DIVs with float: left

Posted on 2009-05-07
7
193 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
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

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Basic CSS issues 24 35
Sick of fighting with footer widgets 5 51
2 CSS questions 11 36
CSS Columns on Slider Mobile 4 28
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now