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!
Related
I've got the following HTML and CSS
http://jsfiddle.net/x7zr999s/
If the browser is small enough, it gives the desired result:
But if it's big enough, there are two or more items per line:
Is there any way to prevent this without disabling float: left or enabling anything that breaks it? I want the posts to "wrap" around the original post like in the images.
This problem appears because you have a fix width on your div. In your fiddle you have given the div, a width of 100, so when the screen widther, and because your div are all floated left they fill in the extra space and that is what happen to your case.
// this code is from the fiddle you create
<div class="reply" width=100 height=100>reply 1</div>
There are some way to solve this. and the easy way is to wrap your div and put exact width you desire. so when the screen widther your floated div will remain to there same position.
This is a demo.
In the demo i put extra div before the end tag of div wrapper and have a class name blocker that help not to break your layout. if you can see in your style are class blocker style is clear:both this article explain about Clearing floats
hope this help...
You can insert you code into a wrapper and give it a maximum width:
#wrap {
width: 100%;
max-width: 1400px;
}
.op, .reply {
float: left
}
.reply {
min-width: 51%;
}
<div id="wrap">
<div class="op"></div>
<div class="reply"></div>
<div class="reply"></div>
<!-- ... more to go ... -->
</div>
Set CSS attribute max-width to the parent div. It sets the maximum width that the parent can extend to. The default width is 100% of the window size. However max-width property restricts further extension of width after the specified maximum value.
Float left wraps child elements if the required parent's width is available. In your case you can restrict it by not allowing the parent's width to extend after a certain point so that the child divs wraps in the given space i.e. in 1 column (required).
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
.containerdiv{
white-space: nowrap;
}
.childdiv{
display : inline-block;
}
<div class="containerdiv">
<div id="child1" class="childdiv"></div>
<div id="child2" class="childdiv></div>
</div>
I dont want the child div's to wrap. hence created the css as above.
in div "child1" i specify the width which varies in differnt places. to prevent the div child2 going beyond the container i want to specify the max width in child2. ie. not more than the parent div. (i cant calculate and put) how can i achieve this. what i can see is now the div child2 is going out than the parent container. how to prevent this?
please help. thanks in advance.
If you want it to be very happy you can just do inline-block and hope for the best.
BUT if the content is too wide it might just push the inline-block to the next line
SOLUTIONS
#containerdiv {overflow:auto;}/*the clear fix*/
#containerdiv>div {float:left; width:50%;}
There, they both take up 50% of the container and overflow auto clear fixes it.
You can do inline-block with 50% but you need to destroy horizontal whitespace.
<div><div></div></div>
This works because there is no whitespace between them
<div>
<div></div><!--
--><div></div>
</div>
This works because the comments remove the whitespace.
Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/
I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.
Why does the div not expand to the full height of the image?
I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0; and float:right, all of which make the containing div not adjust it's height to the image height.
.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
.img{
float:right;
height:auto;
}
<div class="intro">
<div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div>
<p>Sorry, but the page you requested could not be found.</p>
</div>
DEMO
'Why does the div not expand to the full height of the image?'
Because floats will overlap with blocks, only block formatting contexts contain floats. (You can find a pretty good overview of the whole topic here: http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ )
On to solve the problem at hand:
The align=right will actually result in the img being float: right (the align attribute is deprecated and css should be used).
To contain the floated image in its parent div you need either have the parent div establish a block formatting context (block formatting contexts enclose nested floats) or explicitly clear the float with an additional element after the img that is styled as a clear: right.
An easy solution to create a block formatting context is to float the parent div as well, although my preferred solution in this case would be to simply set its overflow to hidden (also resulting in a block formatting context).
Check out the updated fiddle http://jsfiddle.net/R4bCy/8/.
What you need to do is add after the p tag,
<div style="clear:both;"></div>
Whoops, apologies, posted and you edited your question - the align right is floating it I believe (you should instead use float:right and a clearfix of some sort).
example: http://jsfiddle.net/R4bCy/5/
This is what I believe you want:
http://jsfiddle.net/R4bCy/6/
If you wanted the text on the left and the image floated to the right, please do this is your CSS:
http://jsfiddle.net/R4bCy/15/
You can also have two divs that have a width of 50% contained within a container div. This will allow you a little more flexibility in your placement of the image because the text and image will each have their own modifiable divs with independent attributes
I have 2 divs as columns, both are floated left and set to clear none. Their container div has a background image at the top, so the background is at the top of both columns.
I want to be able to also have a background image at the bottom of the columns. Ive created another div which sits inside the container div (but outside the columns) and set a background image to its bottom.
The problem is that this div doesn't extend to the bottom of the columns it contains. How can I make it do this? Ive tried playing around with floats and clearing but without any luck.
Thanks
In addition to the techniques the others already mentioned, you can add overflow:hidden to the parent container's style.
This is a very well known CSS quirk: here is a complete treatment: http://www.quirksmode.org/css/clearing.html
CSS:
div#test {
min-height:100%;
background-image: url('http://www.google.nl/images/logos/ps_logo2.png');
background-repeat: no-repeat;
background-position: bottom;
}
div#wrapper {
height: 500px;
}
HTML:
<div id="wrapper">
<div id="test">Blalalalalala</div>
</div>
This way you're div (#test) will have the height of his parent (#wrapper).
http://jsfiddle.net/F95xN/6/
Try removing the min-height: 100%; and you'll see.
Float elements do not count towards the height of a non-float elements. You can make the container div expand to include these floats in a couple ways:
Add float: left to the container div, too.
Or, add something like <div style="clear: both;"></div> to the end of the container div.
Or, use a more flexible clearfix technique.
Oops, I hadn't noticed but id set the height of one of the containers when I was wire-framing and forgotten it was there. Removing the height and floating the right div fixed this for me.
Thanks anyway.