Newbie: I guess I don't understand DIV! Please explain example

**lwoods** · Nov 1, 2007 07:14

I thought that each "simple" DIV started with a new line. Please explain why the second DIV in the example positions itself after ("to the right of...") the first DIV if I include a "float:left" as the CSS for the left DIV. IOW, I don't understand why the second DIV is affected by the positioning of the first DIV.

TIA

Example Page:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
#colA {
float: left;
}
</style>
</head>
<body>
<div id="colA">This is the first column</div>
<div id="colB">This is the second column</div>
</body>
</html>

**AutisticCuckoo** · Nov 1, 2007 07:33

The first DIV is floated to the left. A floated element is taken out of the normal document flow, and doesn't affect its parent element or subsequent block-level elements. Think of it as if the floated element is lifted up and floats above the rest of the document.

The only effect a floated element has on non-floated content is that lines of text (technically 'line boxes') are shortened next to it, so that they won't end up underneath the float.

What happens in your example is that the first DIV will reside on top of the second DIV. Set some borders or a background colour for #colB and you'll see what I mean. The line boxes in the second DIV that are adjacent to the floating DIV will be shortened, so the content at the top of the second DIV will appear to the right of the first DIV.

If the second DIV is taller than the first, the text will flow back to the left edge below the floating DIV. (In this case; there are ways to prevent that.)

Note that this isn't specific to DIVs. All visible element types in HTML can be floated.

**Paul O'B** · Nov 1, 2007 08:00

If you want to prevent #colB from being alongside the floated content then use the clear property on it. e.g. #colB {clear:both}. The clear property will ensure that elements have no floated content alongside them (i.e. to the left or right or both).

Of course this begs the question as to why did you float #colA in the first place as one of the main reasons for floating is to allow other content to wrap alongside!

**lwoods** · Nov 1, 2007 08:08

Tommy,

A-1 explanation...I think!

Where I am going with this is setting up a header/footer 3-col page layout and find it confusing. I added a "float:left" to my "ColB" and it positions after ColA and added the borders so I could see what was going on. ColB posioned itself horizontally after ColA. So, then "float's" position themselves after one another? IOW, the ColB "float:left" doesn't float to the left of the page, but the float starts after the previous element, right?

TIA

**lwoods** · Nov 1, 2007 08:26

Hi, Paul,

From my comment to Tommy you can see where I am going. Also, just printed off your "2-Column" article so I'll probably get answers there.

Larry

**AutisticCuckoo** · Nov 1, 2007 11:19

You can have several floats side-by-side. The reason yours aren't, is probably because you haven't specified any width for them.

If you float an element to the left, it will shift as far to the left as possible. That means until it touches the parent's 'padding edge' (the outer limit of the parent's padding area) or until it touches another element that has already been floated to the left.

If there isn't room for a floated element because there are other floats in the way, it will drop down as far as is necessary to make room for it. That doesn't necessarily mean that it will drop below all floated predecessors, though.

We're not allowed to link to our own articles here, but if you search for "float layouts" (without the quotes) in Google or Yahoo!, you'll probably find an article I wrote about floats. (It's #1 in both right now.) Quite a few people have said they found it useful.

Floats is a complicated issue, so don't feel bad if you have to read the article a few times to get it. There are also lots of float-related browser bugs, especially in IE. There are known workarounds for most of them, though, which you can find at Position Is Everything.

**lwoods** · Nov 1, 2007 12:26

Wow!!! Just about 1-2 more hours of this BS and I'm back to tables! Lot's of work for next to nothing, IMHO! I had a page working great... Looked "perfect" in IE, and then I fired up Firefox. Now, back to the drawing board. (And, no, I am not defending IE. Probably after the FF change, the IE page will look like crap!)

**Paul O'B** · Nov 1, 2007 12:35

Wow!!! Just about 1-2 more hours of this BS

Sorry but you can't learn CSS in 1 to 2 hours

.

It's such a rich medium that it requires a good understanding before you can apply the concepts efficiently. You wouldn't expect to learn anything else without studying it so why think that CSS can be applied without learning the basic concepts.

You will get expert help here with the right attitude but denigrating CSS isn't the right way to go about it

**Dan Schulz** · Nov 1, 2007 19:34

Paul's right. A more realistic expectation would be one to two years to really grasp most of what CSS can do, and then, if you spend enough time with it, you'll find that you're spending the rest of your life trying to figure out how far you can really push its limits.

**lwoods** · Nov 1, 2007 20:11

You guys are probably right, but I gave up, created a table and have already presented my invoice to the customer. When you are doing this stuff for $$$ the name of the game is to get the work out. But, I'll keep working at it in my spare time.

User Tag List

Thread: Newbie: I guess I don't understand DIV! Please explain example

Thread Tools

Display

Newbie: I guess I don't understand DIV! Please explain example

Bookmarks

Bookmarks

Posting Permissions