How overflow:hidden helps div grow in the html css below? - html

<div id='container' >
<div id='content' > </div>
<div id='rightPane' > </div>
</div>
In the structure above content and rightPane are childs of container div. They contain the content and they expand in height with the growing content but the container div does'nt expand with it. I want to know the reason for it. Also i want to know when i apply overflow:hidden to container it starts expanding with the content in child divs. What happens when we apply overflow:hidden to the container parent div.

Hope this will be helpfull for you..
http://www.quirksmode.org/css/overflow.html

Related

Absolute positioned div won't get height of floated child content

I have been banging my head against this for a while, and I'm stumped (and probably missing something obvious). I have a page with an absolute positioned div, and inside the absolute positioned div, there are two content divs that are floated left. The height of the left content div is 1200px (based on the content inside of it). I would like the right div to be the same height as the div to its left, but I cannot get this to occur. The height of the right div is the same as the height of its parent (the absolute positioned div) which is 530px. If I go up the chain, the body, and html are both 530px as well (they are both said to height: 100%). I placed a div with clear both at the end of the absolute positioned div containing the two floated divs, and nothing.
This has been driving me crazy. I'll include a little HTML just to illustrate what's going on:
<html>
<head></head>
<body> <---- height 100%
<div id="container">
<div id="header">
</div>
<div id="content"> <--- Absolute div, height 100%
<div id="left-column"><---- float left
</div>
<div id="right-column><---- float left
</div>
<div class="clear"></div> <--- cleared div
</div>
</div>
</body>
</html>
I think your real question is
I would like the right div to be the same height as the div to its left
right?
If so, you can find the solution here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Div appears to have no content as nested divs are floated

I have a container with several floated divs within it. I want the div to stretch to the full height of it's content.
I have tried adding overflow:visible to the container to make it expand and also added a clear but neither seem to work.
Live site link available here
You need to put something not floated in the div and clear that.
<div class="magical-div>
<div class="float1"> content </div>
<div class="float2"> content </div>
<div style="display:block;clear:both;"> </div>
</div>

Prevent wrapping of divs inside scrollable div

I have a div with overflow: auto. Suppose I want to put an arbitrary number of div elements inside it such that there is no line wrapping (the additional elements spill into the hidden area and can be scrolled to).
If I knew how wide all those elements would add up to be, I could do this:
<div class="scrollable">
<div class="fixed-width-container">
<!-- elements float left or display inline-block -->
</div>
</div>
Can I get this effect without knowing the total width of the contained elements?
UPDATE #2
Check updated fiddle: http://jsfiddle.net/cyCY3/2/
UPDATE
Check fiddle: http://jsfiddle.net/cyCY3/
Specifying a fixed width and white-space: nowrap for the child elements should solve the issue.

Problem with float - Css

I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1

Two divs floated left next to each other the second must take up the rest of the line

HI, can someone please help me with this. I have:
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
Which gives me exactly what I want, a Red div on the left with a Green div beside it taking up the rest of the width with a Yellow div beside the Red but below the Green div.
However the parent div actually has to also float left ie.
<html>
<body>
<div style="width=100%; float:left">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
This breaks it. Is there a way to get it working again with the parent div float left?
if you float the parent div, in order to keep them all in the parent container, you must also float them all. Those inside without float will fall out.
Edit: Note though that once you float them, width:100% means nothing anymore since the element don't know what to align 100% width with. Might have to give it some fixed width, or use JQuery to get width from document.
http://jsfiddle.net/robx/cpFUV/
It breaks it because a div is normally set to have a width of 100% it's parent container. Setting float:left makes the width set to the content's width. Set a width on your parent container and it should fix it.
You wrote width=100% instead of width:100% - fixed example:
<html>
<body>
<div style="float:left;width:100%;">
<div style="float:left; background-color:Red; height:100px;">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;">Yellow</div>
</div>
</body>
</html>
The reason it worked originally, is that there is an implicit width of 100% on block elements, but you made your div an inline element (of sorts) by adding the float (such that the width of the div reverted back to the content's width, just as your Red div works).
Your width=100% was always ignored, so by putting the width:100% as it should be, you are specifying a width for the element and all is well.
Example: http://jsfiddle.net/hwb4w/