If I have an element like this…
#col1 {
width: 150px;
float: left;
display: block;
background-color: yellow;
}
Is it true that the float basically “cancels out” setting it as a “block” element?
TomTees
Why is it that when I have a <br /> at the end of my first paragraph, that my 3 columns line up on the next line side by side as I would expect, but when I remove the <br />, the first column moves up one line and floats to the far left??
That’s because of one of the specific rules of floats cause this to happen. When a float follows inline content on the same line then the inline content is shifted either right or left to allow the float to occupy its position on that single line.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, line boxes created next to the float are shortened to make room for the margin box of the float. If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. In other words, if inline boxes are placed on the line before a left float is encountered that fits in the remaining line box space, the left float is placed on that line, aligned with the top of the line box, and then the inline boxes already on the line are moved accordingly to the right of the float (the right being the other side of the left float) and vice versa for rtl and right floats.
You should never code like this anyway:
<div id="wrapper"> XXX Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis, iaculis non libero. Quisque imperdiet tristique facilisis. Morbi dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor sem elementum. Sed pretium sollicitudin tellus, eget vestibulum lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis vitae non augue. Praesent sit amet fermentum turpis.
There is no structure and you are running inline elements straight into a block level element causing the browser to construct an anonymous block box.
Text content like that should go in paragraphs and you will very rarely use breaks to make space or create a new line because using the block element will already do that for you.
<div id="wrapper">
<p>Some text content </p>
etc......
Hi,
BTW, why is there a tiny space below the word “HEADER” and “COL2” and technically there are tiny tiny spaces between the text adn the edge of the shaded backgrounds?
The spaces are room for descenders and ascenders in text. You have capitals only in that section and if you used characters with descenders you would see them touch the bottom of the element.
Text is stacked on the baseline of an element which is not the bottom. The baseline is a line that runs horizontally along the base of the text which is the point where the descenders start to go down (e.g. the bottom of capital letters). If this space wasn’t there then the text in subsequent lines would overlap.
Line-height is the height of the line in which the text sits and is made up of the font-size and “half leading” which is added to the top and bottom of a font to arrive at the final line height. You can change the line-height but usually you would want something around 1.3. Anything less than 1 will result in text possibly being clipped.
The inline-box model is a very complicated things so you don’t want to get bogged down too far with details yet. All you need to really know is that line-height controls how far apart the lines of text are and that text is normally aligned on the baseline by default.
Is this what you were talking about??
(see attached)
TomTees
Okay, I guess that makes sense, but still kinda tricky as a beginner!
I used to do that. Good reminder!
TomTees
Well, let me ask another question then…
Attached is an HTML file, CSS file, and a Before and After screen-shot.
Why is it that when I have a <br /> at the end of my first paragraph, that my 3 columns line up on the next line side by side as I would expect, but when I remove the <br />, the first column moves up one line and floats to the far left??
Now, I understand how Floats work - or at least I think I do - but I do not understand why the Float moves up one line…
Make sense?!
See the attached files and screen-shots.
Thanks,
TomTees
Well, I understood that when reading my SitePoint book, but then their examples were more explicit because they did thinks like Float a picture around a large paragraph of text, so it was pretty easy to follow…
The reason you need to have the <br /> in your code is because the text in the last line of the above div does not take up the whole line and so the floated “col1” div takes up that space and that is the way float is supposed to work.
But this is were I get mixed up…
1.) Why doesn’t my “col1” just start on a new line??
It is wrapped by a <div> which is supposed to be a block element, so I would expect it to get bumped to the line below my paragraph even without a <br />
:-/
2.) And if that isn’t true, you’d sorta expect the “col1” to bump - to the left - up against the end of my paragraph text, but since it wants to “float left”, you would think that might force it to a new line as well?! (At least that sounds logical to me?!)
3.) It just seems weird for it to “float left” of just that last line? :-/
Again, the examples I’ve seen in the past, it seemed like the Float: Left actually forced things like pictures into the Upper-Left Corner and then the paragraph would flow to the right of the picture and below the picture. Follow me?
Instead of using a <br /> I would wrap the 3 col divs in another div and the 3 col divs are then floated within their container div.
Well, I think Paul O’ was doing that, but I just was playing around and added a paragraph before the columns to get a better grasp of how all of this works?! (I’m a CSS virgin, you know?!) 
TomTees
The h1 and h2 attributes are, as you expect heading elements. They give something like a line break.
Setting vertical-align: baseline aligns the element with the baseline of the parent.
The line-height: 1 in the body tag reset the line-height for all elements to 1
Just play a bit around with it and you will notice the difference
I’m not following what you mean…
To prevent that you could use vertical-align: baseline; in the reset (like Kalon suggested)
What does that do?
and set the line height to 1 in your body tag
And what will that do?
TomTees
That is because you use a h1 and h2 attributes in those divs. To prevent that you could use vertical-align: baseline; in the reset (like Kalon suggested) and set the line height to 1 in your body tag
html, body, h1, h2, p, div {
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1;
}
So I should just ignore what I;m talking about and what I showed in the screen-shot?
TomTees
Hi Tom. No! A div is a block element floated or not. There was recently another thread about it which you can find here with some useful links as well.
To be honest, I don’t know. I suspect it’s something to do with the default line height and maybe browsers adding some small default “padding” around characters even though the margin and padding styles for the element are set to 0.
There was a thread title recently asking how to move the baseline of text characters to the bottom of their container but since it wasn’t something I am normally concerned about, I didn’t follow the thread.
Whenever I set the margin and padding to 0, any extra very tiny spaces that might still be there, for whatever reason, when the element is rendered don’t bother me.
Okay, I see that now after playing around with things and your and Kalon’s explanation.
You should never code like this anyway:
<div id="wrapper"> XXX Lorem ipsum dolor sit amet, consectetur adipiscing dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis vitae non augue. Praesent sit amet fermentum turpis.
Oh, okay.
There is no structure and you are running inline elements straight into a block level element causing the browser to construct an anonymous block box.
Text content like that should go in paragraphs and you will very rarely use breaks to make space or create a new line because using the block element will already do that for you.
<div id="wrapper">
<p>Some text content </p>
etc......
Oh, okay, I didn’t realize that?!
TomTees
Fair enough. Yeah, I’m already “bogged down” enough as it is?!
TomTees
You are floatong col1 directly after the text and because the text does not take the entire last line when rendered in the browser, the space to the right of the text on that last line is available for any floated elements directly after the text.
Now since col1 is floated left, then col1 is pushed to the left of the last line of text and the last line of text then appears to the right of col1.
To have your 3 columns clear the text before being floated, you need to either enclose the text or 3 columns in a separate block level element.
Either
<div id="wrapper">
<div>
XXX
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
vitae non augue. Praesent sit amet fermentum turpis.
</div>
<div id="col1">COL1</div>
<div id="col2">COL2</div>
<div id="col3">COL3</div>
</div>
or the suggested code in my previous post.
hint: sometimes I find it helpful to put a temporary “border: 1px solid red” style in elements so I can see exactly how they are being layed out on the page.
When you float an element, all you are doing is taking it out of the normal page flow and “floating” it where you want.
The reason you need to have the <br /> in your code is because the text in the last line of the above div does not take up the whole line and so the floated “col1” div takes up that space and that is the way float is supposed to work.
Instead of using a <br /> I would wrap the 3 col divs in another div and the 3 col divs are then floated within their container div.
<div>
<div id="col1">COL1</div>
<div id="col2">COL2</div>
<div id="col3">COL3</div>
</div>
or put the text in a separate <div>
yep - you seem to be getting the hang of it now 
That’s because I have good teachers! 
BTW, why is there a tiny space below the word “HEADER” and “COL2” and technically there are tiny tiny spaces between the text adn the edge of the shaded backgrounds?
I set things like this…
html, body, h1, h2, p, div {
margin: 0;
padding: 0;
}
TomTees