I want a full screen bar in the upper part of my site that has a list in the left and a right part(whatever elements). Why this doesn't work?
#upperline{
background:brown;
width:100%;}
#upperline ul{
float:left;}
#upperline p{
float:right;}
<div id="upperline">
<ul>
<li>our team</li>
<li>help</li>
<li>contact</li>
</ul>
<p>log in</p>
</div>
i am so confused
Put an overflow:hidden; on the parent of floating elements to make it works
See it here
#upperline{
background:brown;
width:100%;
overflow: hidden;}
From this post and adapted to your case :
div is a block-level element (they stretch to 100%
of the parent width).
Now in your example the div contains only floated elements. This makes
it collapse to a height of 0px (It still has 100% width though as you
can see in the example).
Now declaring overflow (any value other than visible) establishes a
new block formatting context, which makes the div contains its
children. Suddenly the div "reappears", not having size 0px anymore.
The reason that your code does't work is that in CSS, putting float: left or float: right makes that element no longer affect its parents height. This means that if you put a float rule on all elements in a container, the container will not have any height. There are a few ways of getting around this.
As Vincent G suggested is putting overflow: hidden on the container div. This works because setting the overflow to hidden (or auto) makes the browser do a different kind of check to see what the height should be. This has a pretty serious downside though. overflow: hidden means that any element that is inside the container that can expand (drop down menu for example) will be cut off.
The second way (and in my opinion the best way) is to place a div with the CSS rule clear:both at the very bottom of the container. This div can be empty so you will not see it. clear: both will put this element below any sibling elements. As long as you don't put a float rule on this element the parent element will be resized to include it.
Here is an example of the second version: https://jsfiddle.net/8ewr89jw/
Related
HTML:
<div id="float_left">
DIV1
</div>
<div id="without_overflow">
DIV2
</div>
css:
#float_left{
float: left;
width:200px;
background-color: red;
}
#without_overflow{
width:400px;
height:40px;
background-color:green;
}
http://jsfiddle.net/kgypo14y/1
The result of the above code is what I expected. However, if I added overflow:auto or overflow:hidden to the second div the result is totally unexpected to me.
http://jsfiddle.net/60nzadLz/2/
Do you have a good explanation for that?
Thank you
Those values of overflow cause the element to establish a new block formatting context. A float may never intrude another block formatting context, so the entire element is shifted away from the float. From the spec:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space.
I have three divs and am floating the first left. The other two wrap around it to the right fine if only the floated element has a width set. But if I set a width for the other 2 divs too, they no longer wrap around the first, just stack up below as in normal flow fashion.
I understand I would need to add the same float class to divs 2 and 3 to get them to float inline, but I was curious as to why this behavoir occuers if all three have widths (even if the widths add up to less than the available broswer window width). Here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background-color: steelblue;
padding: 10px;
width: 200px;
}
.two {
background-color: orange;
padding: 10px;
width: 200px;
}
.three {
background-color: red;
padding: 10px;
width: 200px;
}
.float {
float: left;
}
</style>
</head>
<body>
<div class="one float">
<p>I am paragraph one</p>
</div>
<div class="two">
<p>I am paragraph two</p>
</div>
<div class="three">
<p>I am paragraph three</p>
</div>
</body>
</html>
This might be best explained with a few pictures. First let’s get rid of your third div as it really isn't needed to explain what’s going on.
When you float your first div and don’t give the second div a width, you get this:
The first (floated) div is taken from the normal flow and placed along the left side of its container, where text and inline elements will wrap around it, as floats are supposed to do. What actually then happens is the second div acts like it’s placed behind the first div as you can see when you inspect the document:
Notice how the second div doesn't start at the right edge of the first div – it actually exists in the same space as the first div (appearing as if it was behind it); however the text in the second div begins where the first div ends. The second div then proceeds to take up 100% of the width of its container since it's a block level element. Only the text inside the div is being manipulated by the first floated div.
Now, what happens if we then set a width on the second div? Well you get the following:
So the question is, why does something as simple as setting the width on the second div appear to nullify the float rule on the first div? Well, it’s not. Here’s what’s going on. Just like in the first example, the second div appears to exist behind the first div, however this time you’re explicitly limiting the amount of room the text has to exist. Again if we highlight the second div in the document you’ll see the space it occupies:
Since in this case you’re explicitly setting a width of 200px, there is no space to the right of the floated div for the text to exist, so it gets pushed down below the floated div. Here’s an image that might make it all clearer. Let’s say we increase the width of the second div from 200px to 250px. We then get this:
Now that there’s room to the right of the first div, the text will begin next to it, and drop down below it once it runs out of room horizontally. Continue to increase the width of the second div and you’ll end up with the text of both divs existing next to each other horizontally.
What you want to take away from this is that setting a width on the second div doesn't kill the float rule of the first div, it just limits the amount of room for content to exist.
To quench your curiosity....div's are by default, block level elements....since you haven't clear'ed the float after the 1st block, they still have the effect on the container....
and since block-level-elements occupy the whole width,and the float effect still exist you have them wrapping around the floated div...
clear the divs and u'll see a different version quench your curiosity here
you can do
div {
display: inline-block;
}
Currently they are display block by default. And the default width of a block is 100% so thats why they appear below each other
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
again a problem with IE browsers version 6 and 7
Take a look at an example right away, try resizing the window and such.
a preview (easier to open in IE this way)
code
HTML:
<div class="container">
<div class="left-menu">
<ul>
<li>El1</li>
<li>Element 2</li>
<li>3</li>
</ul>
</div>
<div style="margin-right: 60px;">Тест Тест</div>
</div>
CSS:
.container{
position:absolute;
top:100px;
left:100px;
outline: 1px solid red;
background-color:pink;
}
.left-menu{
outline: 1px solid green;
background-color:#AAA;
width: 50px;
float: right;
}
Now I don't understand 2 things
What happens to the float element? the box is never too small, infact the margin of the adjacent div is bigger than the width of ul div. But when the window is small enough the float element appears to be floating to the window edge not its container edge, but if you scroll a little to the right when the window is small you will see the container is wide enough.
Less important issue why is it this wide? Shouldn't it be as wide as it's contents?
The only fix I've come up with is to give my absolute div a width, but there is the problem. It should resize with the contents say if there is a picture near the float div.
And there will be a picture =) This width workaround of course allows to use tons of javascript, to resize every element in the more complex structure than shown in the example, but i wonder may css be used instead?
Internet Explorer has issues with divs and floats, especially older versions of IE. Whenever I have problems with floats and divs not clearing each other properly, I rely on the Clearfix method.
Add the clearfix css to your main css file, then append the class .clearfix to .container so it looks like <div class="container clearfix">.
For the 2 divs inside, take the margins and widths off of them, if you want those 2 divs width to change based on the content inside them. Float one div left, and float the other div right.
You'll see that the Clearfix forces the parent div (.container) to wrap all the way around the floated elements inside.
Hope this helps!
Suppose I have three <div>s in my page,:
<div id="left" class="test" style="float:left;"></div>
<div id="right" class="test" style="float:right;"></div>
<div id="footer">footer</div>
with this css:
.test{ background:black;height:200px;width:200px;}
#footer{ background:yellow;margin:20px 0 0 0;}
What I want is:
let the "#left" float to left
let the "#right" float to right
change nothing about the "#footer", just set it to margin: 20px;
The result is below:
But I wonder why the floated divs also have the same margin as the #footer. They are floated, so they're independent of the other elements, why would the #footer could affect them?
as well as clear:both on the footer, just adding a container "wrapper" div around the the elements will stop this happening - example
actually adding clear: both; on the footer won't give you a 20px gap between the floats and the footer either, you would actually need to add the 20px bottom margin to the floats - the reasons are all linked.. to clearance or non clearance and it's interaction with Collapsing Margins
Why?
You said you wanted to know why this is happening, in your OP scenario it's because of Collapsing Margins.
You have no clearance involved in the original example, so yes the floats are removed, So the footer margin is still adjoining, therefore collapsing with, the body element, so the body element is the one getting the margin, and then because the floats are still actually inside the body they get the margin too.
As I mentioned above creating a wrapper div to "contain" the floats stops this happening because the rules of collapsing too. However you choose to contain the floats, either with overflow:hidden, or by floating the "wrapper" stops this interaction because .. from the section on collapsing margins:
Vertical margins of elements that
establish new block formatting
contexts (such as floats and elements
with 'overflow' other than 'visible')
do not collapse with their in-flow
children.
you see that both of the properties, float and 'overflow other than visible' are the means to "contain floated children" - actually they're establishing a new block formatting context, but in easy speak most know it as "containing floats" ;)
Now once you have that, that fixes your first bit but then if you decide to introduce clear:both on the footer, the modern browsers will not put a 20px margin between the floats and the footer.. this is actually correct.. from the section on the clear property (my bold):
Then the amount of clearance is set to
the greater of:
The amount necessary to place the border edge of the block even with
the bottom outer edge of the lowest
float that is to be cleared.
The amount necessary to place the top border edge of the block at
its hypothetical position.
In order to place the top edge of the footer below the floats (in your example) the browser has to introduce 200px of clearance, which is far more than 20px so it follows rule 1. If your top margin on the footer was 220px, the margin would be greater than the any clearance needed, so it would follow rule 2.
So, if you did actually want the footer to be 20px below the floats no matter what their heights are, you would put the 20px as a bottom margin onto the two floats, so it [the footer] would clear, via clearance rule 1, the floats with the required gap/margin, no matter which was float the longest.
PS: Don't test the above in IE7 or below - and I hope it wasn't too boring ;)
Add a clear: both to the #footer CSS. That should make the footer render below the floating divs with the margin you want.
Try this and this may solve your problem:
<div id="right" class="test" style="float:right;"></div>
<div id="left" class="test"></div>
<div id="footer">footer</div>
CSS remaining unchanged.
I made a test before finding this page that has two boxes, with the right-floated one being affected by the left block one (which comes after it) here: http://jsfiddle.net/4r75s/
The overflow trick that prevents parent divs collapsing when they only contain floated content seems to work here, that is setting overflow to hidden, auto or scroll. I wrapped them in a containing div to do it and it works: http://jsfiddle.net/4r75s/1/
#container {
overflow: hidden;
}