I have a main wrapper <div> (id #main) that I want to grow as text copy is added to the content <div>, but for some reason the main div will not grow to accommodate the other <div> elements that are in it let alone any content added to the content div.
jsFiddle
Can someone help me out?
You could try a few things here: Float the parent div to the left. If this doesn't do anything then use the overflow: hidden; property in the parent div. Add clear: both; in a child element within it's container.
If that doesn't work, try #main{height:auto}. You may need to add this same attribute to the Content DIV.
Related
I have a div in my HTML page that has overflow-y: scroll;, and this appears to work just fine.
But when I add content to this scrollable child, my page's body increases in height such that now the whole page is scrollable. But scrolling the page down shows empty background-color space.
It's as if the body is allocating space for the content inside the scrollable child, despite the child being scrollable and thus not requiring the body to allocate this space.
Is there a style property that causes this, and is there a style property (or removal of a property) that can fix it?
EDIT:
As a clue, my scrollable child element has display: flex;, and when I change it to display: block;, the new position it has extends exactly to the bottom of the extra space the body has. So it's as if the body is behaving as if the child div has display: block;, ignoring the it's actual display value.
As i understand it, you have a child element inside of a parent element. You want the child element to be scrollable, but the parent element to not be. Is that right?
In many cases, only adding overflow-y: scroll; to the child element might not be enough.
Try adding overflow-y: hidden; to the parent element, and also set a max-height to your child element.
That should fix the issue.
Cheers :)
I have these two div
<div id="newUpContainer" style="width:100%">
<div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">
the inside div has table, which has a height of almost 560px.
I am using firebug and Google Chrome to check the size of the parent div.
but I got that the size is 0. Although the child div has a table as you see in this picture
what should I do to make the content of the inside div exit in the parent div ?
Probably because all elements within your div have been floated. When all child elements are floated, the element appears to take up no space at all. There are a couple of tricks you can use if you want to work around this behavior.
You can use the following:
div#myDiv { overflow: hidden; }
The second, and more popular method is the clearfix hack.
A few CSS frameworks include a .clearfix class that you can apply to such elements, such as Twitter bootstrap.
its because of the float:right of child div.. refer the http://mytactics.blogspot.com/2014/03/parent-div-height-zero0-even-child-div.html
if you remove the float property from child div it will work as you want. it will show the proper height..
but what about if you want to float the child div to right as well as height of parent div??
you need to set the overflow:hidden on parent div..
on existing code you just need to set the overflow:hidden on newUpContainer. and good to
go..
<div id="newUpContainer" style="width:100%;overflow:hidden;">
<div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">
thats it.. :)
check the link
I have run across this problem from time to time and have never been able to understand what causes it.
<div id="wrapper">
<div id="primary">content</div>
<div id="secondary">content</div>
</div>
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
And then you look at the properties on Chrome's inspect element and the wrapper div shows up as 0px height and 0px width.
This is commonly referred to as the clearfix issue. An alternative to placing an inline-styled div below would be to assign overflow:hidden to the wrapper div.
For more information about clearing issues, check out A List Apart: CSS Floats 101 (Section 6: Collapsing specifically)
You need to add a <div style='clear:both'></div> below the <div id='secondary'/>. The CSS tag "float" does not allow the parent to see where the children actually end. Adding the div that clears the left and right sides of any floats allow the parent element to fill the space correctly.
You need to try and clear the div with the float, so try these, adding a <div> after the second div, and adding style="clear:both" to the div i just said to create as the style, or you can simply specify the exact height & width of the wrapper div, let me know what happens please. good luck!
My wrapper div is acting like the children divs aren't cleared properly. It's only wrapping a portion of the vertical height of the children divs. Can anyone explain why this is happening? I cleared both of the divs contained by the wrapper.
packardcarbs.myshopify.com
The password is "ataska."
do not specify a height for your #content. Remove height: 100%; on line 88
I am trying to design a relatively positioned div, which in turn would consist two divs. None of the child divs have a fixed height, but they vary with the content, so the parent div expands with the taller of the child div. Now the design works fine, but when I was analyzing the code with Firebug, I saw that on hovering over the body tag in Firebug, only a short portion of the entire screen at the very top showed as the body. The side-panel confirmed it, the width of the body is ok, but the height is 0. That means the height of the parent div is 0, but Firebug tells me it is not, it is some 560px. How is it possible? I know elements don't expand with their content if the content is absolutely positioned, but here the child divs are relatively positioned, so why doesn't the parent expand with its contents? The fiddle is at http://jsfiddle.net/Cupidvogel/y79NS/6/. Th screenshot (please zoom to understand my point! It is when I try the code as a complete HTML page in Firefox):
In your CSS, div.clear - which you are using to attempt to clear your floats - is itself floated left. That means that it is not part of the document flow either and therefore cannot clear anything.
Removing float does the trick:
.clear { width: 400px; clear: both; position: relative; }
Alternately, if you want div.clear to be floated for some reason, there are a wide variety of other ways to clear your floats.
EDIT: div.main has a height of 520px because it is floated and floated elements "snap" to the dimensions of their children. If you floated body left (please don't; it's not a good idea), it too will "snap" to its children's dimensions and have a set height of 520px.
What here happens is normal browser behavior, you float divs, so there are not in the 'normal' flow anymore because of the float property.
So body is height 0, because body can not calculate height of elements that 'not in there'.
Move you div class="clear" out of the div class="main" and remove the float property aswell on the div class="clear", problem solved.
view: http://jsfiddle.net/y79NS/8/