I have a list of items, each one has a right aligned part and a left aligned part. The left aligned part should expand freely, but stay underneath the right aligned part without pushing it to the next line
what is happening:
|this is an expanding area of text|
|-other stuff-|
what should happen:
|this is an expanding area o|-other stuff-|
^
the last part of the text is cut off here
right now I am using float: right and float: left but how do I stop them from wrapping? The other stuff is always the same stuff, but is rendered with a different width on different browsers, so I cannot specify exact widths and use overflow: hidden
You can achieve this using a combination of overflow and float. This works due to the fact that overflow: hidden establishes a new block formatting context. To paraphrase:
The border box of 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 (in which case the box itself may become narrower due to the floats).
See: http://jsfiddle.net/m8x1g0q8/
Related
Why do we say that the display property of floated elements may change to block level, instead of saying inline-block, because it starts taking the space according to the content it wraps?
inline-block means inline level, block container.
inline-level elements participate in the layout of a line (or multiple lines). This affects line spacing and the vertical alignment of other elements in the same line.
Floated elements do none of that. The participate in block formatting contexts, not inline formatting contexts.
That is the purpose of float. found some information in here
The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
Also
when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.
<style type="text/css">
body > div {
display: inline;
position: relative;
}
body > div > div {
position: absolute;
}
</style>
<div>
<div></div>
</div>
What's the exact containing block of the inner div?
In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
What's the meaning of "the bounding box around the padding boxes of the first and the last inline boxes generated for that element" in the text above?
An inline element cannot "contain" a block-level box in the traditional sense. What happens is that that inline element gets split into individual inline boxes, which live in anonymous block boxes surrounding that block-level box. See section 9.2.1.1 past the first example:
When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.
(There is no translation happening here, so the last sentence is impertinent.)
Your case however is a little more special, since the only thing between the start tag of the outer div and start tag of the inner div, and end tag of the inner div and end tag of the outer div, is inter-element whitespace (including line breaks and indentation), which gets collapsed under normal circumstances. So the inline boxes that are generated end up being
empty, and
in the same position: the same position as the strut.
And since the inline element has no padding, the padding boxes of the empty inline boxes is measured to be zero in length, times the line height. (Note that some browser developer tools may render this as a single point marked by a crosshair when you inspect the outer div.) The containing block of the inner (absolutely positioned) div is defined by the perimeter of those padding boxes combined, and any offsets on the inner div (top, right, bottom, left) are relative to that perimeter. Note, however, that since the inline boxes don't actually have content, the actual position of the inner div is the same as the outer div, had the outer div had content.
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.
...
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
i created two divs first a red background div and then a blue background div both having a width height 100px. Blue div appears below red div. However if i apply a float left or display inline.Blue div appears next to red div. I want to understand how elements are placed on a html page what does applying float or display inline makes a difference to it.
See The Visual Formatting Model in the CSS specification.
Divs are "block" elements which means they have a line break before and after them, making new element appear below them.
If you set display to "inline" then they become inline elements removing the line breaks so new elements appear next to them.
Floating left makes an element "float" on to the left of the page (or containing element), content then flows around the right side of the element from the top of the element (it was designed to replace the "align" attributes for images).