.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.
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
This question is a bit of a css riddle that may or may not have a simple answer:
I have one div (call it #parentDiv) that is of absolute positioning with width 100%.
Within #parentDiv I want to fit n divs, evenly spaced out within the parent div.
In other words, with one div (call it #childDiv1) within #parentDiv, it should fill the screen with the color of #childDiv1.
With two divs, #childDiv1 and #childDiv2, it should fill the screen with the left side being the color of the first, and the right side being the color of the second div.
The key here is that the css properties for all child divs must be equivalent. The reason for this is that I want to add more child divs with jquery later, and have them automatically cram into the parent div.
Any help is greatly appreciated!
I think you can accomplish what you want with a display:table on the parent and display:table-cell on the children. Also setting table-layout:fixed will make the cell widths independent of their content.
Markup:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
CSS:
.parent {
display:table;
table-layout:fixed;
width:100%;
}
.child {
display:table-cell;
}
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!
Currently, one div is floated - my question is why are two divs overlapping even if the dimensions are set in every one of them? How can I fix this?
HTML:
<div class="wrapper">
<div class="block1">
</div>
<div class="block2">
</div>
</div>
My CSS:
.wrapper {border:black solid;width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;border:solid green;}
jsfiddle here - http://jsfiddle.net/FLwUA/1/
The two divs overlap because one is fixed in the DOM layout (the non floated one) and the other is effectively removed from the DOM structure (the floated one) and is free to overlay as the two will not fit side by side in the parent container due to the width being two small.
To fix this there are several options, depending what you mean by fix.
You can use the CSS 'clear' attribute on the non floated div to force it to have nothing on one or both sides of it ('clear:both;' or 'clear:left;' in the scenario given).
or
You can set the non-floated div to be floated, which will also take it out of the DOM layout so that it is now in the same situation as the other floated div.
Additional
Just for information in case all the floating objects become an issue. One way to achieve the same result without floating the divs is to use the "display:inline-block;" CSS attribute on both of them, but you would need to swap the ordering of the two divs around in the HTML to get the same layout.
It's because you are giving them defined widths using pixels - your wrapper width is only 500px, however you are using 300px by 300px divs inside which is equal to 600px so it'll end up outside the container div. You could use percentages in relation to the parent div like so. Here's a jsFiddle.
.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:49%;height:300px;float:right;border:solid red;}
.block2 {width:49%;height:300px;border:solid green;}
Alternately, if you want to keep the fixed width and have one over the other if they are too large, you could just use float on the second block. Here is the jsFiddle.
.wrapper {border:black solid; width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;float:left; border:solid green;}