The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
Related
I was just wondering if someone can give me a hand, i've tried for 3 hours to solve this issue. I need to have the interface like on the picture by using grids, or anything.
The closest thing i can get is when everything displayed correctly except the second bottom grid. It usually gets below the white line (thats the starting point).
Could someone give me a tip on how to get around this problem.
You have minimum two options:
one is to make the grid elements absolutely positioned and give them top, left, right and bottom values. The parent element (grid container) should have "position:relative;" (or can be fixed or absolute, but in your case relative will make more sense).
Another option is to write markup like this:
<div class="col-xs-6">
<div class="col-xs-12">
one
</div>
<div class="col-xs-12">
two
</div>
</div>
<div class="col-xs-6">
three
</div>
Basically you wrap the two divs on the left into one parent div so the layout will not break. Just make sure the height of inner divs are 50% of the height of the right box.
I have a simple layout composed of boxes.
Fiddle of the code
I have <div> tags within <div> tags; I'm using them to 'define' blocks where I can later print out inputs.
<div class=display-window>
<div id=pieces>
</div>
<div id=vline></div>
<div id=message>
<p>Nothing special is going on</p>
</div>
</div>
When I take the <p> element out, the display is fine. But when it's there, the box slides down, making it way off. This is true for both #pieces and #message, here. It seems that the box slides until the paragraph is against its top. I want the box to stay there.
Shouldn't child elements leave their parents undisturbed if they can?! This feels very inflexible!
Note: I get widely different results between codecademy.com and fiddle.net, so it's difficult for me to tell what is going on exactly. Margins and padding solve the problem, but this is, again, inflexible: I want to remove the tags during execution.
This has to do with your inline-block style elements. By default, all inline-block elements have a vertical-align set to baseline, which in your case is the bottom [line-height] (probably 16px) of your vertical line (div#vline) in the middle of your div.
Set the v-align to top on the p element's container and it works great:
#message
{
vertical-align: top;
}
JSFiddle
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 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.
I have 3 DIVs. 2 are inside the parent DIV. something like
<div id="parent">
<div id=1>......</div>
<div id=2 style="position:relative;left:0px;top:-300px;">....</div>
</div>
As you can see, there is an overlapping. The annoying thing is, the parent div has a huge white space at the bottom. The reason apparently is because the parent div doesn't minus the overlapping.
Would you please tell me what I should do?
To expand on Andrew's answer a bit for clarity. If you use position:relative the space that element would take up on the page is preserved(the white space you are seeing) and then the element is moved.
With position:absolute, the space that element would have taken up is not used("removed from the flow of the page"). However, with position:absolute, the element will not be bound inside the parent div anymore either unless declaring the parent div with a position:relative;top:0;left:0; CSS declaration.
So you would want something like this:
<div id="parent" style="position:relative;top:0;left:0;">
<div id=1>......</div>
<div id=2 style="position:absolute;left:0px;top:-300px;">....</div>
</div>
I hope that helps to clarify a little bit. Still not sure if this will give you the exact look you are going for, but from a CSS rule perspective it is correct.
Change position:relative to position:absolute to remove the element from the flow of the page .