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).
Related
I need to convert an existing layout to right-to-left for different languages i.e., arabic, hebrew, etc. and I'm having issues with IE7 - imagine that. I used this awesome tool to convert the css, https://github.com/ded/R2, which worked very well. However, when the layout is rendered in IE7, giving any input element focus causes the element to reposition itself on the other side of the screen i.e., about 540px to left.
The ltr version of the layout has the form element inside a 200px container div that is positioned to the left of the main content area, a basic to column layout. The rtl version is a mirror image i.e., the 200px form container is positioned to the right of the main content area.
The two column and main containers are templates that get loaded into parent containers on the base html page i.e., there are divs for the sidebar and the main content area templates. I noticed that moving these parent containers around changes where the repositioned input elements are placed when clicked. These parent elements default to the width of their parent, which is 870px, and it looks like the input elements are repositioning themselves to the left inner border of these elements. I tried changing the width of these parent containers and that did nothing, any ideas?
Thanks,
J
Fixed this problem by setting the parent container dir attribute to ltr and then input elements to rtl.
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
What is the default behaviour of a div?
I noticed that even if a put a width for a div let's say 100px,
if i put a 2nd div with the same width will put it on the second line.so by default doesn't matter the width. it puts it on different lines?
in this case i understand the need of float.
I thought that any element i put in a html page,they will be side by side unless i add a break element or paragraph or something with that role.
Or maybe i do not use it correctly the div for this kind of alignment,but i really want to
clarify this for good.
A div element is, by default, display: block.
This value causes an element to generate a block box.
The rendering of them is described here
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context.
and then here
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
To stop this kind of rendering, you can use float to cause block level elements to bubble up beside each other. You can also modify the display property of the div.
Divs are block-level elements which mean they stack...like blocks. Although it sounds reasonable that since the width would allow them to fit side-by-side without a float, this is not how they are designed to behave.
If an element is an inline element as opposed to a block, its behavior is to fit side-by-side. You can force this behavior on a div if you would like by tying the two ideas together. You can do something like:
<div style="display:inline-block"></div>
This will allow the div to maintain its other block properties but allow it to fit inline as text and images would and, if this the your desired goal, avoid the use of float.
The DIV by default takes 100% of the screen, even if you set it width the space on the right cannot be occupied by anything.
Try this:
The way to have two div on the same line would be to make them float:
<div style = 'float:left;width:500px;background-color:red;color:white;'>Hey</div>
<div style = 'float:left;width:100px;'> There</div>
Is this even possible? The basic setup is a sidebar on the right with div elements in it.
Clicking one of these elements would add a "popout" div, that should be displayed left of the clicked element. The popout contains a variable number of buttons.
I'd like to style it using only CSS, so i can just add the correct HTML elements from my script and have the stylesheet do the layout.
I've attepmted the popout inside the sidebar element, positioned absolutely, but then I cannot make the sidebar element itself scale to be at least as tall as the popout. (The sidebar elements are usually shorter in height than the popout).
I tried putting the popout before the element, and using position absolute, but for some reason the popout will not get wider if i add more buttons, and instead overflows them downwards.
Using position relative on the popout will make it leave empty space where it would have been in the sidebar.
Floating it messes up the width of other sidebar elements.
The sidebar is fixed width. The popout is fixed-height. The buttons are fixed-size. The sidebar elements are full-width but variable-height.
I've lost track of all the different things I've tried. My closest attempt at the moment is in this JsFiddle, where the popout is positioned correctly, but does not grow leftwards, only overflow downwards. If I set the width to a large number, it will line the buttons up correctly, but it makes strange things happen if I add a :hover pseudo-class.
How could this be done in HTML/CSS? Or is it only possible using JavaScript? If so, what could be a simple "out-of-the-way" approach of doing this?
Add white-space:nowrap; to div.popout.
This will prevent line breaks between the buttons.
Im trying to make this layout (many of these are in a list):
An image (of varying height, but a set width) on the left. To the right is an <h2>, and below that, but still to the right of the image is a div with other content in it.
The div is used to provide a different colored background. Right now, the div for some reason extends behind the image, and the images has a varying distance between them, and sometimes one element will get pushed to the right by the height of the image above.
http://jsfiddle.net/RQsUc/
Add overflow: hidden to your outermost divs (div (display: block)) to contain the floats.