<div class="pull-xs-right">
<i class="sf-icon-add-new grow clickable icon-large au-target" click.delegate="controller.addListItem()" aria-hidden="true" au-target-id="82"></i>
<i class="sf-icon-save grow clickable icon-large" aria-hidden="true"></i>
</div>
This works to pull the icons to the right, which just uses float: right.
The issue is that when using this, the div does not seem to occupy the normal flow, so content below it is underneath part of the icon. As if the padding or margins were no longer respected.
If I take the float off of it, then it moves to the left, and the padding and margins is as usual.
Why is this? How to I make the layout the same as if it were on the left?
Because that's the entire point of floats.
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).
If you want to prevent the div from collapsing vertically, see Floating elements within a div, floats outside of div. Why?
add class clearfix to the subsequent element.
Related
It seems to me that we get a totally different behavior when floating 2 divs instead of one.
In this example http://jsfiddle.net/nwZC3/2/ the left-sidebar floats inside the main div.
<div class="left-sidebar" style="float:left; width:10%;"></div>
<div class="main" style="width:70%;"></div>
But in this one http://jsfiddle.net/m77na/9/ the main div, which this time has float:left style does not float inside the right-sidebar, the difference being that we also have another floating div in the layout.
<div class="left-sidebar" style="float:left;width:10%;"></div>
<div class="main" style="width:70%;float:left"></div>
<div class="right-sidebar" style="width:20%;"></div>
I tried to find a floating rule in the spec (w3c visual formatting model) to explain this behavior but I didn't find any.
When you float only .left-sidebar, what happens is that it floats against the content of .main only. The .main element itself is positioned as if .left-sidebar were not there at all — that is, .left-sidebar has been taken out of the normal flow that .main participates in.
When you float both elements, what happens is that .left-sidebar floats against .main itself. The result is that the two boxes stack against each other side by side. The .main element is positioned following the float of .left-sidebar because both of them are floating. The content within .main is unaffected by the .left-sidebar float.
Section 9.5.1 of the spec has very concise descriptions of the float property and its values. Specifically,
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
It also specifies in detail how exactly floats should interact with other content and other floats. There are several rules but only the second one applies to your example (it basically means "left-floating boxes must stack against one another, if not horizontally then vertically"):
Here are the precise rules that govern the behavior of floats:
...
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.
...
I am using pull-right on a div that sits inside a container div but for some when I use a pull right on the div it makes the div wider so that it isn't flush with the right side of the page. Ive used Chrome to inspect the element but I can't figure out where this extra width is coming from. It isn't the padding or the margin the container just seems to be wider?
Problem can be seen here at the top of the page where all the social media icons are.
http://puntachivosurfcamp.com/
<div class="container">
<div class="pull-right">
<a><img/></a>
...
</div>
</div>
There is no such extra space but the text is just aligned to the left although the container you are talking about is pull-right but the objects in it aren't. So:
Apply text-right as well on your pull-right div to align the text to right side :)
Apply pull-right to every object present in the div aka social media icons (but I recommend the first approach)
Explanation:
The width of the container is greater then the width of all the object in it so when the objects in the container will be left aligned it will show us as if some extra space was present on the right side but as soon as we align the text to the right we see that now the space has been vanished and the objects have now come on the extreme right of your page.
why the div3 is not showing green color that i define??
<div style="width:100px;height:100px;background-color:#ffff00;float:left">
div1
</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left">
div2
</div>
<div style="width:100px;height:100px;background-color:#00ff33">
div3
</div>
why is this happening ? but it shows the green color when i apply attribute float="left" also working when i apply float="right" but when there is no float attribute in the div3 then the green color didn't show up why ?
Because floated elements are taken out of the normal flow (not entirely like absolutely positioned elements) - the third div in your HTML is actually sitting behind the first two floated divs, although the line box (div3) is sitting below them, as line-boxes are the only elements that floats respect. A line box is an element that belongs in the inline formatting context
From the 2.1 Spec
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.
http://jsfiddle.net/Adv2v/
If you had some margins around your div1 and div2, you could see div3:
<h2>Why it breaks...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;">div3</div>
<h2>How to fix it...</h2>
<div style="width:100px;height:100px;background-color:#ffff00;float:left;margin: 0 10px;">div1</div>
<div style="width:100px;height:100px;background-color:#0000ff;float:left;margin: 0 10px;">div2</div>
<div style="width:100px;height:100px;background-color:#00ff33;overflow: auto;">div3</div>
However, this is easily fixed using overflow: auto on div3.
See fiddle: http://jsfiddle.net/audetwebdesign/jv7YB/
Why You Are Seeing This Effect
Your div3 in in the flow, with a specified height and width of 100px, and a background color of green.
Without the floats, you would see a green square positioned to the top left of the viewport which is the parent element. Within the green square, the text (more accurately, line box containing the text) is positioned to the top left.
When you add the floats, the floats are positioned starting at the top left of the view port and are painted over any regular in-flow content.
However, the line box containing the div3 text is shortened to make room for the floats, but the inline box is pushed down since there is no room in the div3 container to contain the floats and the original text.
The background of the div3 container is separate from the line box containing the text, and is is not pushed down as one might expect.
When you apply overflow: auto to the div3 block, it creates a new block formatting context and the div3 block acts like a self-contained unit, so the green background encloses the content and any child elements.
References
For stacking order and how background colors are painted, see: http://www.w3.org/TR/CSS2/zindex.html#painting-order
For block formatting contexts: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
For more insight about why block formatting contexts are implemented as they are, see:
Why does CSS2.1 define overflow values other than "visible" to establish a new block formatting context? courtesy of BoltClock
That's because float elements do not consume space, so your body is not height enough and your element will be invisible. If you add a lot of breaks after the second div, you'll see the div.
The green background is there but it's behind your yellow DIV. Text and inline-elements wrap around floated elements so your "div3" text gets pushed down.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
Alternative solutions are to give your non-floating div a left margin, the size of the sum of the widths of the floating ones. In this case, 200px. Of course this requires that you know exactly how wide those floating ones are.
JSFiddle
Or, put the floating ones inside the non-floating one and increase its width, in this case to 300px. But again, this requires you to know how wide the floating ones are.
JSFiddle
HTML
<img id="btnLeft" src="img/btnLeft.png"/>
<img id="logo01" src="img/logo01.png"/>
CSS
#btnLeft{heigth:64px;}
#btnLeft:hover{height:74px;}
On mouseover btnLeft pushes #logo01 down by 10px.
I want #logo01 to stay in place.
Create a separate div for your image elements, float them left or right depending on your preference and then use use vertical-align: top on the containing div. Here is an example: http://jsfiddle.net/94zVg/.
The reason for this issue is because you have to image elements side by side which will be aligned to the bottom of their containing block. When one image is enlargened, it expands the containing block and the other element descends to stick to the bottom of it. Floating and aligning vertically solve this problem.
Give the first image a width as well, otherwise its width will expand proportionally and push the adjacent image down.
#btnLeft{height:64px;width:100px;}
#btnLeft:hover{height:74px;}
Here is a demonstration with explicit width: http://jsfiddle.net/XRKK4/
Here is a demonstration without explicit width: http://jsfiddle.net/XRKK4/1/
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.