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;
}
Related
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.
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;}
I have a set of elements inside a parent element. The parent element's height can change (it will be changed by some jQuery files). Here is how the layout looks:
<div class = "parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
I want the child elements to end up aligned at the middle of the parent div, but i can't figure out how to write the css to do so. I have tried writing things like:
.child1 {
...
vertical-align: middle;
}
Which doesn't work. I have also tried:
.parent {
display:table;
}
.child1 {
display:table-cell;
vertical-align:middle;
}
This also doesn't work. Any ideas how to do this?
You can create a wrapper for the elements you wish to center inside a container that gets centered instead like so:
HTML
<div class ="parent">
<div class="centerme">
<div class="child1">
....
</div>
<div class="child2">
....
</div>
</div>
</div>
Then you can simply do this:
CSS
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Demo. Method found over at CSS-tricks.
Check this link : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
this will bring your child div's top to 50% of the container. just add margin-top: -(x)px; where (x) is half of your child div's height.
You have forgotten to apply the same styling on child2 as on child1, like so:
.child1, .child2 {
display:table-cell;
vertical-align:middle;
}
Here is a jsfiddle: http://jsfiddle.net/D853q/1/
This is slightly more complicated than your standard "how do I vertically align a single div inside a parent container."
If you have a multiple number (which can change) of child elements that need to be aligned vertically or if your parent container's height changes, then you will need to use Javsacript/JQuery to set the position as there is no "standard" way to apply a middle vertical alignment to multiple child elements inside a parent container utilizing just CSS.
EDIT: I've been proven wrong, you can apparently with using :before pseudo-element, but it won't work in IE7 unless you hack around it.
I've implemented this in a fiddle: http://jsfiddle.net/rJJah/20/
Key parts
Each Child element has a position:relative. This is important because certain child elements may have variable height, and this eliminates the need to calculate the top position separately for each.
Everytime you change the height of the parent container, you will need to rerun the height calculations and setting the top offset to each child.
I have two inner divs which are nested inside a wrapper div. I want the two inner div's to get arranged one below the other. But as of now they are getting arranged on the same line.
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
#inner1{
float:left;
}
#inner2{
float:left;
}
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
Try a clear: left on #inner2. Because they are both being set to float it should cause a line return.
#inner1 {
float:left;
}
#inner2{
float:left;
clear: left;
}
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
If you want the two divs to be displayed one above the other, the simplest answer is to remove the float: left;from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
Alternatively, you could simply add clear:both; to the divs, which will force the floated content to clear previous floats.
Set the main div CSS to somthing like:
<style>
.wrapper{
display:flex;
flex-direction: column;
}
</style>
<div id="wrapper">
<div id="inner1">This is inner div 1</div>
<div id="inner2">This is inner div 2</div>
</div>
For more flexbox CSS refer: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The default behaviour of divs is to take the full width available in their parent container.
This is the same as if you'd give the inner divs a width of 100%.
By floating the divs, they ignore their default and size their width to fit the content. Everything behind it (in the HTML), is placed under the div (on the rendered page).
This is the reason that they align theirselves next to each other.
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.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/float
Get rid of the float, and the divs will be aligned under each other.
If this does not happen, you'll have some other css on divs or children of wrapper defining a floating behaviour or an inline display.
If you want to keep the float, for whatever reason, you can use clear on the 2nd div to reset the floating properties of elements before that element.
clear has 5 valid values: none | left | right | both | inherit. Clearing no floats (used to override inherited properties), left or right floats or both floats. Inherit means it'll inherit the behaviour of the parent element
Also, because of the default behaviour, you don't need to set the width and height on auto.
You only need this is you want to set a hardcoded height/width. E.g. 80% / 800px / 500em / ...
<div id="wrapper">
<div id="inner1"></div>
<div id="inner2"></div>
</div>
CSS is
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto; // this is not needed, as parent container, this div will size automaticly
width:auto; // this is not needed, as parent container, this div will size automaticly
}
/*
You can get rid of the inner divs in the css, unless you want to style them.
If you want to style them identicly, you can use concatenation
*/
#inner1, #inner2 {
border: 1px solid black;
}
You don't even need the float:left;
It seems the default behavior is to render one below the other,
if it doesn't happen it's because they are inheriting some style from above.
CSS:
#wrapper{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
</style>
HTML:
<div id="wrapper">
<div id="inner1">inner1</div>
<div id="inner2">inner2</div>
</div>