The problem is that the parent div should respect the text height of both columns (#col1 and #col2, each using float:left). However, parent's height property (#content) acts like no text is written inside.
Code: http://jsfiddle.net/Arkl1te/UWNaT/
I could insert a fixed height, but it shouldn't work like that: height should have a "flexible" value, even with text.
As the children are floating you have 2 options:
Add overflow: hidden; to the parent to respect the height of the children:
#content{
overflow: hidden;
}
Add an empty element with clear:both as the latest element:
<div id="content">
<p id="col1">...</p>
<p id="col2">...</p>
<div style="clear:both;"></div>
</div>
Related
I have the following markup (see my Plunker):
<div class="workflow-step-container">
<div class="step-container">
<div class="step-bubble completed">1</div>
<span class="divider"></span>
</div>
<div class="step-container">
<div class="step-bubble completed">2</div>
<span class="divider"></span>
</div>
...
</div>
The number of steps (bubbles) can vary. What I would like to happen is if the number of bubbles exceeds the container width, I would like the bubble container to become horizontally scrollable. Currently, the content just wraps.
I've added overflow-x: auto;, but that doesn't seem to work.
Thanks in advance
Update
After adding white-space:nowrap; to my .workflow-step-container styles, the bubbles now do not wrap as desired. In my actual project, though, the content continues to wrap and doesn't ever become scrollable. Here is a screenshot. I tried wrapping the .workflow-step-container div in another div to which I set overflow-x: hidden;, but that did nothing. Here is a Plunker.
You could simply change the white-space property of the parent element to nowrap in order to prevent the inline-level elements from wrapping. In doing so, a horizontal scrollbar will be added when content overflows.
Updated Example
.workflow-step-container {
overflow-x: auto;
white-space: nowrap;
}
Based on your update, you need to add table-layout: fixed/width: 100% to the nested ancestor table element.
The problem was that the table element's width was being determined by the maximum width of the .workflow-step-container element. Adding a width of 100% forces the parent element to take the width of its parent element, and table-layout: fixed changes the layout algorithm to allow for this.
Updated Example
.col-xs-8 table {
table-layout: fixed;
width: 100%;
}
I have a container div element and some children div elements.
<div>
<div>foo</div>
<div>bar</div>
<div>baz</div>
<div>
I want to horizontally list the children elements in a single line without line breaks. I read that I can use white-space:nowrap on the container element and/or display:inline or display:inline-block on the children. This works when the container's width is long enough.
However, I have a container whose width may become shorter than the sum of the widths of the children. The way mentioned above does not prohibit line breaks in such case. I still want to prohibit line breaks and force them to be on a single line, with the extra part of children being hidden if the container width is not enough. How can I do that?
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
#parent{
overflow: hidden;
white-space: nowrap;
}
.child{
display: inline-block;
width: 200px;
height: 200px;
}
http://jsfiddle.net/YAp6k/
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 want to equal two divs height when a div height large
example :
<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>
the Div 2 height larger then div one
I may have a possible solution for you:
http://jsfiddle.net/adaz/wRcWj/1/
Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.
Brief description:
1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix).
2) Float one of the divs inside so the container will expand depending on content inside.
3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.
Cons:
- Lack of IE6 support
- You need to chose which div will always have less content and then position in absolute
Hope it helps!
This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/
Wrap the two div's whose height you are trying to equalize in a container div, i.e.
<div id="container">
<div class="column">A<br/>B</div>
<div class="column">C</div>
</div>
Set an explicit height on the container and set height=100% on the columns:
div#container {
float: left;
height: 10em;
}
div.column {
height: 100%;
background-color: red;
}
Suppose I have this HTML structure:
<div class="a">
<div class="floated-left">...</div>
<div class="floated-left">...</div>
</div>
I have noticed that if I don't set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it's there but of almost no vertical size.
To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.
Here is a real example:
<html>
<head>
<style>
.a { background-color: red; }
.b { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<p>div with class a, that doesn't overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>
<div style="clear:both"></div>
<p>div with class b, that does overflow:hidden:</p>
<div class="b">
<div class="floated-left">Hi,</div>
<div class="floated-left">Dad!</div>
</div>
</body>
</html>
Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).
Can anyone explain this behaviour?
Here is screenshot of the example:
Thanks, Boda Cydo.
When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.
In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.
Hi, Mom does not get any background because the background comes from the a div, which is height 0 (or near 0). The inner divs are actually overflowing its bounds (which is what floats do by default).
The thing to remember with floats is that they don't have inherent height (when it comes to layout and determining the parent's height). Inline content simply flows around them. So without overflow: hidden the parent div has no height. No height means no background. The floats are still rendered but they go beyond the bounds of the parent div ie the content in the floats is outside the parent div.
Floated elements don't occupy any vertical space for clearing, there are a few ways to fix this, something like:
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
<br style="clear: left;" />
</div>
Would clear after, and make the outer div have a vertical height. Set a border: solid 1px red; on .a to see this in action.
Alternative CSS only solution:
.a:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Per the spec for CSS basic box model:
Margins of a floated box do not
collapse with any other margins.
Margins of a box with ‘overflow’ other
than ‘visible’ do not collapse with
its children's margins.
By providing it the "overflow" property explicitly you have allowed the children to fit into this model, thus the b div no longer has bounds attached to its children. If you apply visible or inherit (which the parent of b is visible by default), the bounds return and the children divs define the margins.
http://www.w3.org/TR/css3-box/ (RE: Example X)