I have a quandary. I have an application where CSS seems to do what it is supposed to do, but does not show results as you would expect and I can find no solution to get the "expected" results. The issue is how content is flowed when there is a float element to the left of the content and the content styles use padding or margins.
In my application, users can enter text in a DIV. There may or may not be a float left element so that the div with the text can either be at the left of the body area or shifted to the right (i.e. after the floating element).
When there is no floating element, the text is fine with paragraphs (i.e. with divs and appropriate classes) that are left, indented, first line indented, or hanging.
The CSS for the paragraphs are:
.firstindent { text-indent:30px; }
.indent { padding-left:30px; }
.hanging { padding-left:30px; text-indent:-30px; }
However, when a a float left element is added, only the standard and first indent show properly. This is because padding, borders, and margins are outside the box model "content" and only items in the "content" area are adjusted for the float.
Floats. In the float model, a box is first laid out according to the normal flow, then >taken out of the flow and shifted to the left or right as far as possible. Content may
flow along the side of a float.
If you use Firefox with Firebug, you can highlight the divs and you will find that the padding is shown at the left edge, i.e. "underneath" the floating element, not adjusted to the right of the floating element.
As a result, the paragraphs with a float left element look like this:
(Note that the float element also effects the presentation of lists.)
So far, I have not been able to come up with a CSS solution that lets me set the main text contents and then have them properly display whether or not there is a float left element to the left.
I have posted a full HTML sample so please feel free to snag the source and see if you can find a solution! Sample Page
Thank you - I should have included the "what you expect". Here it is with the float left and the float left spacer.
To correct, set overflow: hidden on all your paragraph elements (and lists, etc.) See fiddle.
Related
I'm following In Search of the Holy Grail, but am having trouble understanding what's actually going on in step 3.
To break the problem down, I disabled the margins/offsets of the "left" and "right" divs. This gives you the content at the top, and then the two other elements sitting side by side under it as I would expect [see P1].
I then gradually decreased the margin-left of the "left" div from 0px to -199px which again does what I expect [see P2].
But at -200px (the width of the left element itself), it shoots up to the top [see P3], with the left edge against the right edge of the content. I would have expected it to just keep going off the edge.
Why does it jump up? And if there's no conceptual explanation as to why, where does it describe that functionality in the spec?
Images:
P1
P2
P3
Remember that both #content and #left (as well as #right) are floated.
Due to the nature of floats, they (or their contents) may overlap. This is well described in this section of the spec, and is fairly easy to understand. If you apply negative margins to a floated element that's adjacent to another float, it will simply move to its left (similar to having a left relative offset), over its sibling.
In the section on the float property, you'll find a list of "the precise rules that govern the behavior of floats." Now, I'm not 100% familiar with the float model, but these points are what I believe to be relevant:
2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.1
7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
8. A floating box must be placed as high as possible.
9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
So my guess is: a margin of -200px, which is as you say the negative equivalent of the width of the #left element itself, causes it to float all the way up and to the right (rather than to the left) and to hug the edge of the #center element which itself is also floated. The right edge of both elements touch each other because of this full, equal negative margin. Consequently, as you continue to increase (or decrease?) the negative margin, you'll see that the #left element continues to move to its left.
Note that the padding applied to the #container element doesn't interact with the margins; even if you remove the padding on either side or both sides, the margins will interact in the same way.
1 Note also that there's a statement in the section on collapsing margins in the linked section of the spec, that describes the behavior of negative margins, but that is irrelevant as the margins we are concerned with here are horizontal and belong to floated elements, and so are never affected by collapsing.
you are using <h2> tag for left and right heading but in center you are using <h1> that's why you have this problem if you want to solve this problem do one thing 1 use all <h2> tag for heading and if you want to use then apply below class on
h1
{
margin-top:10px;
}
Which CSS rules explain the following sceanrio:
Assuming I have the following HTML CSS snippets
HTML:
<div id="main">
<div id="first">
first div float left
</div>
<div id="second">
second div does not have a float property set
and appears in a new line instead of next to
the first div
</div>
</div>
CSS:
#first
float: left
What I am wondering about is, why the second div floats next to the first div, only when its width is set. If I replace the second div with a paragraph, it also floats next the first div. So why does the second div only position next to the first one when its width is set or its own float property is set to float left?
By the way. I am not trying to achieve any sort of layout here. I am just trying to understand these particular behaviours of the div element and other block elements.
EDIT:
OK. First of all thanks for the answers. The problem I had was based on the fact that I did set the width of the first and the second div to the same value, so that the content of the second could not float around the first one. To sum things up, I guess it is important to know that elements with the float property set are taken put of the page flow and dont take up any space. Secondly one should remember only the content can flow around, not the actual div.
A <div> is a block level element which is 100% wide and has a line break before & after when it's within the normal content flow.
Technically, when you float a <div>, you're taking the element out of the normal flow so it no longer has a line-break before & after and also the other page content flows around it.
So why does the second div only position next to the first one when
its width is set or its own float property is set to float left?
Floated <div>'s will always appear side-by-side only if there's enough room to contain them side-by-side. Otherwise, the next floated <div> will wrap to a new line. This is because floated <div>'s are outside the content flow and defined to behave this way in the spec.
However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <div>.
The second <div>, itself, is always underneath (meaning behind) the floated <div>. Whereas, the "content" of the second <div> always flows around the floated <div>. (see three examples below)
So whether or not you set the width of the second div, its content will still flow around the left floated div as you can see illustrated here in three examples. (For illustration purposes, the first <div> is red with 50% opacity and the second is blue with a thick green border.)
Fiddle with second div wider than first
Fiddle with no set width (100%) on second div
Fiddle with second div narrower than first
As you can see from all three examples above, despite the existence of the floated first <div>...
the second <div> always starts on the left edge of the screen despite the width of the second <div>.
the second <div> always starts on the top edge of the screen because there's no other page flow content above the second <div>.
the actual content of the second <div> flows around (to the right of) the floated first <div> only where there is enough room inside its container to allow it to flow around the floated <div>. Otherwise, it appears as if it's starting a new line where really only its content is continuing to flow around the bottom of the floated <div>.
W3C Spec: 9 Visual formatting model, 9.5 Floats
A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact rules governing float behavior
are given in the description of the 'float' property.
A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.
If there is not enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.
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, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
And here are a whole bunch of examples...
W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning
What makes you believe the div's are floated next to each other? In reality they are not. It's only that their content shows up next to each other but that's not because DIV #second is to the left of the floated DIV. It doesn't matter if you set the width or not.
What in fact is happening is that the floated DIV #first is floated to the left. Because it's floated, it's taken out of the normal flow. This means that DIV #second is actually on the same place as where DIV #first is appearing. The content of DIV #second though is inline content and inline content always flows around floated elements. Even floated elements that are outside of the container. So DIV #second is underneath DIV #first but the content of DIV #second is floating around DIV #first.
To illustrate that, I've create this CSS:
#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }
Play with the alpha value of the RGBA() value (i.e. the last parameter, it can range from 0 to 1) of the background-color of DIV #first and you will see that DIV #second is in fact below DIV #first all the time
Unless you clear your floats, the next block level element will float next to the last float by default.
I'm not sure what you're trying to achieve here, but if you want #first to float, and #second to NOT float, the rule you'd want to add to #first is : clear:both
But, that's pretty silly, you might as well just remove the float properties completely if you want to stack them.
Block elements take 100% of the width of their parent element, so even if your first div is floated, the second div will take the width of his parent, thus falling on a second line. This is why if you specify a smaller width, it stands next to the first floated div.
The reason why it also works if you float the two divs is that floated element behave a bit more like inline-block elements, wich means they will only take the space needed for the content inside of them.
Bottom line is, if you want these two divs to stand next to each other, you should probably just float the two of them.
I have the following CSS:
label{
float:left;
margin-left:24px;
}
button{
margin-left:24px;
}
for this HTML:
<label>
<input>
</label>
<button>
and I was hoping that the button was found at a distance of 24 pixels of the label, however this did not happen until I floated the button to the left too. What part of the CSS specification I can refer to understand why this happening?
(Please, sorry my English.)
Just read the W3C documentation for float:
Here are the precise rules that govern
the behavior of floats:
The left outer edge of a left-floating box may not be to the
left of the left edge of its
containing block. An analogous rule
holds for right-floating elements.
If the current box is left-floating, and there are any
left-floating boxes generated by
elements earlier in the source
document, then for each such earlier
box, either the left outer edge of the
current box must be to the right of
the right outer edge of the earlier
box, or its top must be lower than the
bottom of the earlier box. Analogous
rules hold for right-floating boxes.
The right outer edge of a left-floating box may not be to the
right of the left outer edge of any
right-floating box that is next to it.
Analogous rules hold for
right-floating elements.
A floating box's outer top may not be higher than the top of its
containing block. When the float
occurs between two collapsing margins,
the float is positioned as if it had
an otherwise empty anonymous block
parent taking part in the flow. The
position of such a parent is defined
by the rules in the section on margin
collapsing.
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated
by an element earlier in the source
document.
The outer top of an element's floating box may not be higher than
the top of any line-box containing a
box generated by an element earlier in
the source document.
A left-floating box that has another left-floating box to its left
may not have its right outer edge to
the right of its containing block's
right edge. (Loosely: a left float may
not stick out at the right edge,
unless it is already as far to the
left as possible.) An analogous rule
holds for right-floating elements.
A floating box must be placed as high as possible.
A left-floating box must be put as far to the left as possible, a
right-floating box as far to the right
as possible. A higher position is
preferred over one that is further to
the left/right.
It's because inline elements can't have a margin property. <label> is an inline element, and by floating it, you make it act as if it were an inline-block, allowing you to add a margin to it.
It's strange.
Try using display: inline-block; instead of float: left; and see what happens.
Sorry for my previous answer which I hope was deleted.
Margins are tricky. In this case, margins don't count against floats: they are computed from the place where the element would start if the float wasn't there. Possibly you can apply a margin-right to the float, or if you know the float's width add that plus its margin to the value you want to separate them.
A training made by the W3C consortium may help you.
And the specification with all the theory involved with this field: Visual formatting model
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.
I have 1 span within a container div. I want the span floated to the right. The content within the div and the span should be on one line.
In Firefox, that's how it displays.
But in IE, the span is displayed on a new line:
http://i48.tinypic.com/etzg5f.png
Why do the browsers display the content differently?
You should float the other content to the left. So have two floats; left and right.
Another approach could be using position absolute on the span, andposition relative on the surrounding div. Then you could put the positions (top, left, right and bottom) and position the elements as you should!
You could probably get away with specifying a width on your .catalogSelection#top #rss style definition. When setting the element to float it considers it a block level element and since your existing text is not floated, it wraps to the next line. Either this, or you need to float your Choose Catalog text to the left as well. Or as Kevin suggested, you can just put your Floated elements to the left of the non-floated, but this can be an issue when it comes to screen readers as it reads from left to right in your code, and is not semantically correct.