Related
Most embarassed to be coming to others for help with this if i'm honest, but i have reached my 1 1/2 hr sanity limit.
I want to have a block (with a coloured border) postioned on the right of the page with width suitable to the text content + padding. I want it to reserve the whole row for itself without other element below creeping into the space left on the left.
I realised early on that any width = 100% would mean that the whole row would have the border rather then just the content I wanted and various experiments with float lead to the space on the left being occupied with elements creeping into the space from below. To remedy i have created a containing block with 100% width and display = block and put the border round the child div. Still doesn't work! I have the #costblock being the container and the #costs being the content:
#costsblock {
display: block;
width: 100%;
}
#costs {
border: 1px solid #008eaf;
padding: 10px 5px;
width: auto;
text-align: right;
}
<div id="costsblock">
<div id="costs">The text</div>
</div>
I have experimented with virtually all combinations of display and width and float on both the parent and the child and nothing works - I either get the whole row surrounded by the border or, if I dare to put a float: right anywhere at all then the space on the left gets filled wih elements creeping in from below.
I think that I need to contrain the child width to what is necessary to hold the text only, but I can't seem to get that working!
Your approach with the extra container element did not work, because #post is a block element, and as such still takes the whole width (unless you tell it otherwise). Anyway, there is no need for an extra element.
I want it to reserve the whole row for itself without other element below creeping into the space left on the left.
Then all you have to do is clear the float on the next element:
#costs {
float:right;
border: 1px solid #008eaf;
padding: 10px 5px;
}
#next {
clear:right;
}
<div id="costs">The text</div>
<div id="next">I am the next element following the floating one.</div>
You can use float, but be sure to have an element that has clear: both below the floating element to prevent any elements 'creeping into the space left'.
For example:
<div id="costsblock">
<div id="costs">The text</div>
<div style="clear: both"></div>
</div>
Full example: http://jsfiddle.net/thijs_s/xxc9nk1t/
You should be able do solve this by changing display to inline-block for the child and then setting text-align to right for the parent element:
#costsblock {
text-align:right;
}
#costs {
border: 1px solid #008eaf;
padding: 10px 5px;
display:inline-block;
}
It is not necessary to set display:block for a div element, since they are defined as block level elements by default.
I have text inside a <div> WITHOUT a border property.
<div id="main">
<div id="second"></div>
<p>TEXT</p>
</div>
CSS
#second {
height: 100px;
width: 100px;
background:red;
float:left;
}
#main {
width: 200px;
height: 200px;
}
My text aligns as shown in this example at the top with other div.
When I add CSS border property to DIV, pharagraph has margin applied - see here
Why does it happen?
That's unexpected behavior is coming from using float:left; only to one div. If you use float for p also then you'll not get different behavior.
Check this demo : toggle border on/off.
From the spec:
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.
I would like to ask how height and float work. I have an outer div and an inner div that has content in it. Its height may vary depending on the content of the inner div but it seems that my inner div will overflow its outside div. What would be the proper way to do it?
<html>
<body>
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
<div style="width:500px; height:200px; background-color:black; float:right"></div>
</div>
</body>
</html>
The floated elements do not add to the height of the container element, and hence if you don't clear them, container height won't increase...
I'll show you visually:
More Explanation:
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
You can also add overflow: hidden; on container elements, but I would suggest you use clear: both; instead.
Also if you might like to self-clear an element you can use
.self_clear:after {
content: "";
clear: both;
display: table;
}
How Does CSS Float Work?
What is float exactly and what does it do?
The float property is misunderstood by most beginners. Well, what exactly does float do? Initially, the float property was introduced to flow text around images, which are floated left or right. Here's another explanation by #Madara Uchicha. So, is it wrong to use the float property for placing boxes side by side? The answer is no; there is no problem if you use the float property in order to set boxes side by side.
Floating an inline or block level element will make the element behave like an inline-block element.Demo
If you float an element left or right, the width of the element will be limited to the content it holds, unless width is defined explicitly ...
You cannot float an element center. This is the biggest issue I've always seen with beginners, using float: center;, which is not a valid value for the float property. float is generally used to float/move content to the very left or to the very right. There are only four valid values for float property i.e left, right, none (default) and inherit.
Parent element collapses, when it contains floated child elements, in order to prevent this, we use clear: both; property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer here.
(Important) Think of it where we have a stack of various elements. When we use float: left; or float: right; the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. (Please don't relate this to z-index as that is completely different.)
Taking a case as an example to explain how CSS floats work, assuming we need a simple 2 column layout with a header, footer, and 2 columns, so here is what the blueprint looks like...
In the above example, we will be floating only the red boxes, either you can float both to the left, or you can float on to left, and another to right as well, depends on the layout, if it's 3 columns, you may float 2 columns to left where another one to the right so depends, though in this example, we have a simplified 2 column layout so will float one to left and the other to the right.
Markup and styles for creating the layout explained further down...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
Let's go step by step with the layout and see how float works..
First of all, we use the main wrapper element, you can just assume that it's your viewport, then we use header and assign a height of 50px so nothing fancy there. It's just a normal non floated block level element which will take up 100% horizontal space unless it's floated or we assign inline-block to it.
The first valid value for float is left so in our example, we use float: left; for .floated_left, so we intend to float a block to the left of our container element.
Column floated to the left
And yes, if you see, the parent element, which is .wrapper is collapsed, the one you see with a green border didn't expand, but it should right? Will come back to that in a while, for now, we have got a column floated to left.
Coming to the second column, lets it float this one to the right
Another column floated to the right
Here, we have a 300px wide column which we float to the right, which will sit beside the first column as it's floated to the left, and since it's floated to the left, it created empty gutter to the right, and since there was ample of space on the right, our right floated element sat perfectly beside the left one.
Still, the parent element is collapsed, well, let's fix that now. There are many ways to prevent the parent element from getting collapsed.
Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is a cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.
Add, <div style="clear: both;"></div> before the .wrapper div ends, like
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
Demo
Well, that fixes very well, no collapsed parent anymore, but it adds unnecessary markup to the DOM, so some suggest, to use overflow: hidden; on the parent element holding floated child elements which work as intended.
Use overflow: hidden; on .wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
Demo
That saves us an element every time we need to clear float but as I tested various cases with this, it failed in one particular one, which uses box-shadow on the child elements.
Demo (Can't see the shadow on all 4 sides, overflow: hidden; causes this issue)
So what now? Save an element, no overflow: hidden; so go for a clear fix hack, use the below snippet in your CSS, and just as you use overflow: hidden; for the parent element, call the class below on the parent element to self-clear.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
Demo
Here, shadow works as intended, also, it self-clears the parent element which prevents to collapse.
And lastly, we use footer after we clear the floated elements.
Demo
When is float: none; used anyways, as it is the default, so any use to declare float: none;?
Well, it depends, if you are going for a responsive design, you will use this value a lot of times, when you want your floated elements to render one below another at a certain resolution. For that float: none; property plays an important role there.
Few real-world examples of how float is useful.
The first example we already saw is to create one or more than one column layouts.
Using img floated inside p which will enable our content to flow around.
Demo (Without floating img)
Demo 2 (img floated to the left)
Using float for creating horizontal menu - Demo
Float second element as well, or use `margin`
Last but not the least, I want to explain this particular case where you float only single element to the left but you do not float the other, so what happens?
Suppose if we remove float: right; from our .floated_right class, the div will be rendered from extreme left as it isn't floated.
Demo
So in this case, either you can float the to the left as well
OR
You can use margin-left which will be equal to the size of the left floated column i.e 200px wide.
You need to add overflow:auto to your parent div for it to encompass the inner floated div:
<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
jsFiddle example
You are encountering the float bug (though I'm not sure if it's technically a bug due to how many browsers exhibit this behaviour). Here is what is happening:
Under normal circumstances, assuming that no explicit height has been set, a block level element such as a div will set its height based on its content. The bottom of the parent div will extend beyond the last element. Unfortunately, floating an element stops the parent from taking the floated element into account when determining its height. This means that if your last element is floated, it will not "stretch" the parent in the same way a normal element would.
Clearing
There are two common ways to fix this. The first is to add a "clearing" element; that is, another element below the floated one that will force the parent to stretch. So add the following html as the last child:
<div style="clear:both"></div>
It shouldn't be visible, and by using clear:both, you make sure that it won't sit next to the floated element, but after it.
Overflow:
The second method, which is preferred by most people (I think) is to change the CSS of the parent element so that the overflow is anything but "visible". So setting the overflow to "hidden" will force the parent to stretch beyond the bottom of the floated child. This is only true if you haven't set a height on the parent, of course.
Like I said, the second method is preferred as it doesn't require you to go and add semantically meaningless elements to your markup, but there are times when you need the overflow to be visible, in which case adding a clearing element is more than acceptable.
Its because of the float of the div. Add overflow: hidden on the outside element.
<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
<div style="width:500px; height:200px; background-color:black; float:right">
</div>
</div>
Demo
You confuse how browsers renders the elements when there are floating elements. If one block element is floating (your inner div in your case), other block elements will ignore it because browser removes floating elements from the normal flow of the web page. Then, because the floated div has been removed from the normal flow, the outside div is filled in, like the inner div isn't there. However, inline elements (images, links, text, blackquotes) will respect the boundaries of the floating element. If you introduce text in the outside div, the text will place arround de inner div.
In other words, block elements (headers, paragraphs, divs, etc) ignore floating elements and fill in, and inline elements (images, links, text, etc) respect boundaries of floating elements.
An fiddle example here
<body>
<div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
floating element
</div>
<h1 style="background-color:red;"> this is a big header</h1>
<p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
<img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
</p>
Try this one
.parent_div{
display: flex;
}
you can use overflow property to the container div if you don't have any div to show over the container eg:
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
</div>
Here is the following css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
-----------------------OR------------------------------
<div class="cointainer">
<div class="one">Content One</div>
<div class="two">Content Two</div>
<div class="clearfix"></div>
</div>
Here is the following css:
.container{
width:100%;/* As per your requirment */
height:auto;
float:left;
overflow:hidden;
}
.one{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.two{
width:200px;/* As per your requirment */
height:auto;
float:left;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear: both;
}
I have provided below marginfix which is a block level element and one and two are also block level, but these are floated. That is the reason why they are on same line of layout, but marginfix is not floated either, and block level element should go below the element as the following
+--------------------+ +--------------------+
| | | |
+--------------------+ +--------------------+
+--------------------------+
| |
+--------------------------+
But it works like this
+--------------------+ +--------------------------+ +--------------------+
| | | | | |
+--------------------+ +--------------------------+ +--------------------+
This is the HTML
<div class="wrap">
<div class="one">one</div>
<div class="two">two</div>
<div class="marginfix">three</div>
</div>
CSS
.wrap{
width: 500px;
background-color: red;
position: relative;
margin: 0 auto;
}
.one{
width: 200px;
float: left;
}
.two{
width: 200px;
float: right;
}
.marginfix{
margin: 0 210px;
}
UPDATE NOTE
Someone may say marginfix contain the remaining space of the floated elements. If so, why it wouldn't work if we change the order of the html element. This html won't work as above html
<div class="wrap">
<div class="one">one</div>
<div class="marginfix">three</div>
<div class="two">two</div>
</div>
So how does the margin value work?
That's how floats work - they are removed from the normal flow of content. If you want to force .marginfix to sit below the others, add .marginfix{clear: both;} to your styles.
When you float any element to left then other elements go in the same line of layout if you haven't cleared the floats and that's why marginfix is set exactly after the float left even if you haven't set a margin value to marginfix and the remaining of the elements go toward the left edge from line (when one height is achieved) and likely to two if your one and two is not enough height as marginfix but here you have set marginfix a margin value so it remains in the same pillar.
Play with this fiddle
That happened because both the class .one and .two were floated, leaving 100px space between them. That's where the .marginfix will fill in. If you want the .marginfix to be placed below them and is aligned center, assign clear:both; to place it below them and use margin:0 auto; to make it centered.
Interaction of Margins and Floated Elements
Demo HTML and CSS: http://jsfiddle.net/audetwebdesign/2Hn7D/
In this example, .wrap is the parent, containing block element with a fixed width
of 600px and centered horizontally using a standard method, margin: 0 auto.
Within the parent block, there is an block level element, div.marginfix with some text
(for illustation purposes). As such, div.marginfix is in normal flow and in a
block formatting context. Its width will extend to fill the width of the parent
container.
The parent block also contains two floated elements, div.one and div.two,
floated left and right respectively, both having width: 200px.
A CSS compliant browser will follow the CSS block formatting model to lay out the
content in the following manner:
(1) Ignore the floated elements and then compute the layout for the remaining
in-flow elements (.marginfix) adjusting for margin, padding, line-height,
inline elements and so on.
(2) Determine the space required to place the floats such that the left floated
element is flush with the left edge of the parent, the right floated element is
flush with the right edge of the parent, and both have their top edges adjacent
to the top edge of the parent element.
(3) Adjust the width of the line boxes (the imaginary boxes around the text in
the child div's) as needed to allow the text of the normal flow elements to
wrap around floated elements.
Basic Example
In the simplest case, the text within .marginfix wraps around the two floated
elements and extends to the left and right edges of the parent element once the
text has cleared the floats.
Example 2 - Add Margins
If you add left and right margins to .marginfix, the width of the in-flow div
is computed to be {width of parent - left margin - right margin}, so the text
is constrained to the center of the layout. A similar effect would result from
using padding.
It is important to note that the text formatting in this example would be the
same even if one or both of the floated siblings were removed.
Example 3 - Changing the Order of the Elements
When using floats, the order of the elements makes a difference.
Consider the following variation, place .marginfix between the two floated div's:
<div class="wrap ex3">
<div class="one mark">one - add some text to make it taller for effect.</div>
<div class="marginfix">three - Nulla vehicula libero... </div>
<div class="two mark">two - single liner</div>
</div>
In this case, the text from .marginfix will wrap around the left floated element.
However, the right floated element now appears after the in-flow block, and for this
reason, the .two element is flushed to the right (as expected) and to the bottom
edge of the nearest block level element, in this case, .marginfix.
Any margins or padding applied to .marginfix would simply extend the height of
the inflow element and div.two would still be positioned after it (see Example 4).
Example 5 - Establishing a New Block Formatting Context
It you apply overflow: hidden to .marginfix, the CSS formatting model starts a
new block formatting context, which means that .marginfix will not extend
beyond any edges of any any adjacent floated elements.
In this example, the text from .marginfix no longer wraps around the left floated
element.
As before, the right floated div is still positioned after .marginfix since
.marginfix is still a block level element.
re: your edit - the css "clear" property makes the current element sit below any floated elements that come before it in your HTML. Therefore, if you change your HTML to the following:
<div class="wrap ex3">
<div class="one mark">one - add some text to make it taller for effect.</div>
<div class="marginfix">three - Nulla vehicula libero... </div>
<div class="two mark">two - single liner</div>
</div>
div class="one" will be "cleared" but div class "two" will not.
Play with the jsfiddle. I have converted your code to the fiddle. And for each div there is different background color. Play with various float values. And the change in the layout will be clear to you from the different colors of the boxes.
inherit
left - floats the box to the left with surrounding content flowing to the right.
right - floats the box to the right with surrounding content flowing to the left.
none (default)
If you do not want the next box to wrap around the floating objects, you can apply the clear property:
clear: left will clear left floated boxes
clear: right will clear right floated boxes
clear: both will clear both left and right floated boxes.
Refer html dog tutorial on page layout for more details about layout using css
Floats are removed from the normal flow of content. When you apply floats to a div margins do not see the floated div as an actual element that is till you apply a clear: both.
see jsfiddle
.one{
width: 200px;
float: left;
clear: both;
}
.two{
width: 200px;
float: right;
clear: both;
}
.marginfix{
margin: 0 210px;
}
Now it sounds like you are trying to achieve a positioning where the marginfix pushes the div to the middle. If that is the concept, place display: block on marginfix.
See jsfiddle
.one{
width: 200px;
float: left;
}
.two{
width: 200px;
float: right;
}
.marginfix{
margin: 0 210px;
clear: both;
}
Margins push elements around an element. Since floats are outside of the normal flow, margins push from the edge because it doesnt see the element as a boundary. Think of the boundary as element that has clear: both with float as well. Now it will see it as an element.
Here is the even stranger issue. When both of the float left and right have clear both the float right gets pushed down. But if you attach clear: both to marginfix it pushes it down like in your first example.
I think first answer by Chapurlink makes sense, have modifies his fiddle, see the answer,
that works as you have explained/expected, white box is div three with clear:both
See the fiddle
I hope this is in context to your question.
This is HTML:
=================
<div id="container">
<div id="one"><h1>hello world1</h1></div>
<div id="two"><h1>hello world2</h1></div>
<div id="three"><h1>hello world3</h1></div>
</div>
CSS
====
#container
{
height: 1024px;
width: 760px;
position: fixed;
}
#one
{
margin-left: 10px;
position: relative;
border: 2px solid red;
width: 220px;
}
#two
{
margin-left: 272px;
position: absolute;
border: 2px solid Blue;
width: 220px;
float: right;
}
#three
{
border: 2px solid Green;
float: right;
margin-top: -86px;
position: relative;
width: 220px;
}
Suppose I have this HTML structure:
<div class="a">
<div class="floated-left">...</div>
<div class="floated-left">...</div>
</div>
I have noticed that if I don't set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it's there but of almost no vertical size.
To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.
Here is a real example:
<html>
<head>
<style>
.a { background-color: red; }
.b { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<p>div with class a, that doesn't overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>
<div style="clear:both"></div>
<p>div with class b, that does overflow:hidden:</p>
<div class="b">
<div class="floated-left">Hi,</div>
<div class="floated-left">Dad!</div>
</div>
</body>
</html>
Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).
Can anyone explain this behaviour?
Here is screenshot of the example:
Thanks, Boda Cydo.
When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.
In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.
Hi, Mom does not get any background because the background comes from the a div, which is height 0 (or near 0). The inner divs are actually overflowing its bounds (which is what floats do by default).
The thing to remember with floats is that they don't have inherent height (when it comes to layout and determining the parent's height). Inline content simply flows around them. So without overflow: hidden the parent div has no height. No height means no background. The floats are still rendered but they go beyond the bounds of the parent div ie the content in the floats is outside the parent div.
Floated elements don't occupy any vertical space for clearing, there are a few ways to fix this, something like:
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
<br style="clear: left;" />
</div>
Would clear after, and make the outer div have a vertical height. Set a border: solid 1px red; on .a to see this in action.
Alternative CSS only solution:
.a:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Per the spec for CSS basic box model:
Margins of a floated box do not
collapse with any other margins.
Margins of a box with ‘overflow’ other
than ‘visible’ do not collapse with
its children's margins.
By providing it the "overflow" property explicitly you have allowed the children to fit into this model, thus the b div no longer has bounds attached to its children. If you apply visible or inherit (which the parent of b is visible by default), the bounds return and the children divs define the margins.
http://www.w3.org/TR/css3-box/ (RE: Example X)