Are floated element really removed from normal html flow? - html

Question

Here's my jsFiddle
In my Fiddle link i have floated my left-sidebar and right-sidebar. As per my knowledge floated element are removed from html normal flow. i just did not understand if it is so why it is displacing my right-sidebar.
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area">hi</div>
<div class="right-sidebar"></div>
my css:
.content-area {
background-color: #bbb;
height: 310px;
}
.left-sidebar {
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
float: right;
width: 50px;
height: 100%;
background-color: #abcdef;
}

Answer 1

http://www.vanseodesign.com/css/understanding-css-floats/
Elements are placed in the order per a normal flow, removed from the normal flow and then moved right or left based on the float. Your right side bar is shifted down because it comes after the main content in a normal flow. If you don't want want it to be shifted you need to change the order of your elements.
http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
Per the spec:
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.

Answer 2

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.

Answer 3

<div class="content-area">
<div class="left-sidebar"></div>
<div class="right-sidebar"></div>
<div class="main-area">hi</div>
You need to change main-area to come after the other two floated elements. I may seem weird to do it this way, but it means that main-area will not push right-sidebar down because the content is coming after it in the markup. I hope this helps.