I want my container div to get the height of max of its children's height. without knowing what height the child divs are going to have. I was trying out on JSFiddle. The container div is on red. which is not showing up. Why?
Add the following property:
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
UPDATE
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
.c:after{
clear: both;
content: "";
display: block;
}
http://jsfiddle.net/gtdfY/368/
You are floating the children which means they "float" in front of the container.
In order to take the correct height, you must "clear" the float
The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htm for more info on floats.
eg.
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
It is not that easier?
.c {
overflow: auto;
}
Try inserting this clearing div before the last </div>
<div style="clear: both; line-height: 0;"> </div>
The best and the most bulletproof solution is to add ::before and ::after pseudoelements to the container. So if you have for example a list like:
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
And every elements in the list has float:left property, then you should add to your css:
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Or you could try display:inline-block; property, then you don't need to add any clearfix.
I ran into this same issue, and I have come up with four total viable solutions:
Make the container display: flex; (this is my favorite solution)
Add overflow: auto; or overflow: hidden; to the container
Add the following CSS for the container:
.c:after {
clear: both;
content: "";
display: block;
}
Make the following the last item inside the container:
<div style="clear: both;"></div>
Related
I have three section elements that hold css animations inside. When I try to put them side by side using display: inline or float them, they pile up.
HTML
<section class="spinner-1">
<div class="spinner"></div>
</section>
<section class="spinner-2">
<div class="spinner"></div>
</section>
<section class="spinner-4">
<div class="spinner"></div>
</section>
CSS
.spinner {
position: absolute;
}
.spinner-1, .spinner-2, .spinner-4 {
height: 100px;
width: 200px;
}
you can see the rest of the css code and preview in codepen.
section {
float: left;
}
Does it in your codepen.
It's because you're setting the .spinner itself to position: absolute.
You need to use display: inline-block because you're expecting them to maintain their own width and height. display: inline elements have no direct control over their width and height, so the elements do nothing.
section {display:inline-block;}
They won't stack this way.
Ok, I've got a problem out there. To be short, here's a fiddle. I'll repeat myself here:
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
}
The first question is: why does not the inner div's background cover the entire span?
The second one: I'd like to have a fix, of course.
And one more thing: the html elements are generated by a third-party tool, to which I have no access, which makes "wrapping it all in another div" thing impossible. Only CSS, only hardcore!
UPDATE:
By the way, the container is itself resizable (a frame inside a frameset to be precise).
EDIT:
I've updated the fiddle in order to provide more info. The problem is, that when the second div will be selected, I'd like the red background to stretch to the width of the longest line.
UPDATE 2:
The above described problem can be solved with display: table-row; (see here). The tricky thing is to make this work even if content is less wide than the container itself (a fiddle).
Divs have width:auto by default. So the inner div is 100px wide, like the outer one. The span overflows out of the div.
In this particular case, the easiest solution is to give the inner div display:inline-block
div div {display:inline-block}
so that it no longer fits itself in its parent, but it moulds itself to the width of its contents.
Updated fiddle.
Edit: to answer your second question: yes, the display:inline-block stops the selected div from being as wide as the container.
Fortunately, that can be corrected by adding
min-width:100%;
in addition to the display:inline-block. See more updated fiddle.
Another edit:
And the question keeps changing. Now it's about frames in a frameset. Oh well.
Here is the latest fiddle that solves the problem as formulated now. But let's see what changes the future has in store...
I think you just need to apply the background color to the span instead of the div.
http://jsfiddle.net/M294p/8/
HTML:
<div class="container">
<div class="selected">
<span>Why don't you cover all the width!?</span>
</div>
<div>
<span>Little content</span>
</div>
</div>
CSS:
.container {
width: 100px;
white-space: nowrap;
background-color: #0f0;
overflow-x: auto;
height: 200px;
}
.selected {
background-color: #f00;
white-space: nowrap;
display:inline-block;
}
The answer to your first question is because you have explicit width to the parent div. You can apply display: inline-block to inner div and remove the width: 100px from the parent.
HTML
<div>
<div class="test">
<span>Why don't you cover all the width!?</span>
</div>
</div>
CSS
.test {
background: red;
display: inline-block;
}
An example : http://jsfiddle.net/M294p/6/
On this site: http://walkman.pk/aserdus2/tagok.php
I have two background-images on the left and right side, which doesn't appear, and I can't figure it out why ?
Every other page of the website works fine. It seems that some <div> elements are not closed properly. When I watch it with chrome inspector, I see that the content div is very thin, but I don't understand the reason of this.
What should I do to show up the images?
You have only floating elements inside #content, so its height is zero. You can fix this by setting overflow to something other than visible:
#content {
overflow: hidden;
}
Voilà:
That's because both elements with class block are floating and therefore the element with id content has no height (which has the background images). So you need to give height to the content element (height: 250px) should solve the problem.
Add this to your #content {}:
height: 600px; (or however high the images are)
I tried it with Inspect Element and the pictures appeared.
Good luck!
Try
<div id="content">
...
<div style="clear:both"></div>
<!-- CONTENT END -->
</div>
OR
http://www.webtoolkit.info/css-clearfix.html
<div id="content" class="clearfix">
...
<!-- CONTENT END -->
</div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Right now I have something like this:
<div id="pagebody">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
<div id="footer">
....text....
</div>
left-entries and right-entries have float: left; so that they show up beside each other within pagebody.
pagebody has margin-left: auto; margin-right: auto; so that it sits in the center.
How can I get footer to ALWAYS show up under pagebody? Right now it is positioned somewhat behind everything. I have a feeling it is because pagebody doesn't have a defined height (because the height is defined by what is inside it and that's variable depending on the content).
Any ideas?
If you add clear:both; to #footer it will always be below the pagebody
I would recommend clearing your floated DIV's. You can do this by adding a "clear" class any parent elements that contains any floated children. I think this works best, because it's less markup in your HTML. (via Nicolas Gallagher)
For example:
<style>
.clear:before, .clear:after { content:""; display:table; }
.clear:after { clear:both; }
.clear { zoom:1; } /* IE 6/7 (hasLayout) */
</style>
<div id="pagebody" class="clear">
<div id="left-entries"> </div>
<div id="right-entries"> </div>
</div>
Should clear anything below the #pagebody DIV.
You have to clear it.
clear: both;
I have a pure CSS layout with a simple container that houses my text. The container has a min-height attribute.
The page content is generated from the database. The problem is as the page grows the text overflows the container that it is in.
How do I get around this?
My guess is you need to clear your floats I'd say..
Clearing Floats
<div id="myContainer">
<textarea />
<div class="clear"> </div>
</div>
If you want to trigger hasLayout to the container without additional markup you can use
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1; /* triggers hasLayout in IE */
}