Position Relative, Float Takes Div Out of The Normal Flow

Position relative, float takes div out of the normal flow

Ahh, the collapse problem. There's an excellant article about floats here http://css-tricks.com/all-about-floats/
In your case, I'd add

overflow: auto

to #one

The relative info is quoted below:

Techniques for Clearing Floats

If you are in a situation where you always know what the succeeding
element is going to be, you can apply the clear: both; value to that
element and go about your business. This is ideal as it requires no
fancy hacks and no additional elements making it perfectly semantic.
Of course things don't typically work out that way and we need to have
more float-clearing tools in our toolbox.

The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element
or some other random element used, but div is the most common because
it has no brower default styling, doesn't have any special function,
and is unlikely to be generically styled with CSS. This method is
scorned by semantic purists since its presence has no contexual
meaning at all to the page and is there purely for presentation. Of
course in the strictest sense they are right, but it gets the job done
right and doesn't hurt anybody.

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the
parent element, the parent will expand to contain the floats,
effectively clearing it for succeeding elements. This method can be
beautifully semantic as it may not require an additional elements.
However if you find yourself adding a new div just to apply this, it
is equally as unsemantic as the empty div method and less adaptable.
Also bear in mind that the overflow property isn't specifically for
clearing floats. Be careful not to hide content or trigger unwanted
scrollbars.

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the
parent, you apply an additional class like "clearfix" to it. Then
apply this CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

This will apply a small bit of content, hidden from view, after the
parent element which clears the float. This isn't quite the whole
story, as additional code needs to be used to accomodate for older
browsers.

Can I combine position: relative and float: left?

Yes.

CSS2.1, 9.4.3:

"Once a box has been laid out according to the normal flow or floated,
it may be shifted relative to this position. This is called relative positioning"

Floating elements within a div, floats outside of div. Why?

The easiest is to put overflow:hidden on the parent div and don't specify a height:

#parent { overflow: hidden }

Another way is to also float the parent div:

#parent { float: left; width: 100% }

Another way uses a clear element:

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

What are the CSS properties that get elements out of the normal flow?

Only the following properties affects the normal flow of any given element:

• float: right|left
• position: absolute|fixed

Just for completeness:

• display: none removes the element from the flow (strictly speaking the element will not have a flow order)

• position: relative does not change the flow order of the element, but changes its position relative to the normal flow position.

• visibility: hidden will maintain the element on the flow but will not render it to the viewport.

How does float relate to absolute and relative div positioning?

http://www.barelyfitz.com/screencast/html-training/css/positioning/ 7,8 and 9

With CSS float, an element can be pushed to the left or right,
allowing other elements to wrap around it.

The statements you provided 'appear' correct

How do I get a div to float to the bottom of its container?

After struggling with various techniques for a couple of days I have to say that this appears to be impossible. Even using javascript (which I don't want to do) it doesn't seem possible.

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

I guess I'll have to revisit the design goals for this item unless anyone has a last minute suggestion.

Why Float is better than position:relative and absolute while we can make layout quickly with position?

float will not break the document flow -- also, it will position any element it uses the best it can fit in the container width -- say I have 5 x 200px divs in a 800px width container, the last 5th will go in a "new line" below the other ones -- using position:relative will make you need to calculate when it needs to break yourself, and it won't break correctly since the display will either be block and go over the whole width or it will be inline-block or inline which won't render the same way for divs as block would and would pretty much mess up the document flow & layout.

It depends on what you want to do: position:relative is used to move the element a bit aside from it's natural location, whereas float will make it pop to the left-most or right-most position in the parent element. position:absolute will let you position it relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Are floated element really removed from normal html flow?

You are confused with position: absolute. Floating will move an element to the left or right, encouraging other elements to 'float' around it, but they will still be in the flow and other elements are influenced by it.

When you use position: absolute, you remove the element from the flow, placing it on top or below other elements.

Here is your updated fiddle. The most important changes are in this part:

.content-area {
    background-color: #bbb;
    height: 310px;
    position: relative;
}
.left-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}
.right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

The parent is given a position too, so the sidebars can be positions in it. The left and right sidebar are positioned at the top of the parent and on the far left and far right respectively.

If you look closely, you see that the contents of the main content block are now behind the side bars. I've made the text a bit longer, so you can see it appearing from underneath the left bar.

Of course this is probably not what you want, but you can solve it quite easily by changing the order in your markup. First add the sidebars in whichever order you like, and then add the main content. The results can be seen here.

The way this works: at the top of your content-area, the left side bar is started first. It floats to the left, encouraging the next element to float next to it, having the same top position. That element would be the right side bar, which float to the right, and also encourages the next element to float left of it. The main area doesn't have an explicit width, so it figures that it would fit snuggly inbetween, still starting at the same top position.

Since the main element itself doesn't float, the next element will start (top) where the main area ends. So if the right bar would come after the main area, it shifts down, like in your example. The right bar would move even further down if the main area contents grow.

---

Related Topics