I have some HTML+CSS code that wants to layout several divs. The layout is like this: all divs stay in a parent div whose size is fixed. Then each child div should stay on its own line, and use the minimum height for drawing its content. The last div should consume all remaining height, so that the parent div is entirely filled.
This code shows my approach using CSS float and clear properties:
<html>
<head>
<style>
.container {
width: 500px;
height: 500px;
border: 3px solid black;
}
.top {
background-color: yellow;
float: left;
clear: left;
width: 100%;
}
.bottom {
background-color: blue;
height: 100%;
float: left;
clear: left;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="top">top1</div>
<div class="top">top2</div>
<div class="top">top3</div>
<div class="top">top4</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
However, the last div overflows from the its parent. I guess it is because of the width: 100%.
Is there any way to solve this problem? I want to avoid setting the overflow attribute of the parent, and also I have to avoid using absolute positioning. If somehow I could trick the last div to use the height of the parent minus the sum of height of the other divs.
Add:
div.container { overflow: hidden; }
It's not overflowing because it's 100% width. It's overflowing because it's a float and thus removed from the normal layout. Changing the overflow property will change how the browser caters for contained floats.
Oh and if you aren't already, make sure you're using a DOCTYPE. It particularly matters for IE.
Related
I want the child elements of a height:100%; container to apply height:100%;. This seems to fail when there is a doctype present.
If you use min-height:100%; for the parent, the child elements don't apply height:100%;.
If you use height:100%; the child elements get stretched, but will overflow the parent.
If you then try to use height:100%; on the parent and keep min-height:100%; on the children, the children won't stretch anymore.
Here's a little sample:
<!DOCTYPE html>
<html>
<head>
<title>Oh Well</title>
<style>
html, body {
width: 100%;
height:100%;
background: white;
margin:0;
padding:0;
}
#min-h-100 {
background-color: #eee;
min-height: 100%;
}
#min-h-100 > div{
min-height: 100%;
}
#h-100 {
background-color: #ccc;
height: 100%;
}
#h-100 > div {
height: 100%;
}
</style>
</head>
<body>
<div id="min-h-100">
<div>If this is heigher than the container, the container expands.</div>
<div>The child elements do not get 100% height.</div>
</div>
<div id="h-100">
<div>The child elements get 100% height.</div>
<div>But there will be an overflow.</div>
</div>
<div>THIS SHOULD BE PUSHED DOWN</div>
</body>
</html>
edit:
min-height doesn't inherit. #GCryrillus came up with the idea to apply display:table to the parent, which at least stretches the parent. #Volker E. created a codepen.
edit:
If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport.
I find this question interesting, especially case #2 with id="h-100" implying several height: 100% children on height: 100% parent.
I've come up with a Codepen including the different options.
To prevent a overflow on the second case, you could also use overflow: hidden, but that would be an information loss.
#GCyrillus said it right, use display: table; and display: table-row/table-cell; conformingly to the child divs.
#h-100-table {
background-color: #ddd;
display: table;
width: 100%;
height: 100%;
}
#h-100-table > div {
display: table-row;
width: 100%;
}
#h-100-table > div > div { // you don't need to go for extra nesting, but it's clearer.
display: table-cell;
width: 100%;
}
The grand-children of #h-100-table are not essential, it's more for maintainability. You could go with table-row children only too.
If you don't want to support IE≤8, you can set the child min-height:100vh; which will make it at least as high as the viewport (so basically gives you the wanted effect). (seen here)
I'm trying to implement solution similar to provided here:
https://stackoverflow.com/a/12242226
The problem with it (for me) is that it does not allow to restrict height of inner div.
So I've updated solution as follows:
<style type='text/css'>
html, body {
height: 400px;
width: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 400px;
width: 100%;
background: yellow;
}
.component {
display: table-row;
background: gray;
}
.content {
display: table-cell; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.contentRel {
height: 100%;
background: blue;
position: relative;
}
.contentRemaining {
background: red;
position: absolute;
top:30px;
bottom:0;
left: 0;
right: 0;
overflow: auto;
}
</style>
<body>
<div class="wrapper">
<div class="component">
<h1>Component</h1>
<p>of variable height</p>
</div>
<div class="content">
<div class='contentRel'>
<div>100% Component Header</div>
<div class='contentRemaining'>
<div style='height:1000px'>
100% Component Content
</div>
</div>
</div>
</div>
<div class="component">
<h3>Other</h3>
<p>componet of variable height</p>
</div>
</div>
</body>
http://jsfiddle.net/UrcV7/
It works as I need in FF (height of contentRel div is set to 320px - height of wrapper div minus sum of heights of component divs), but doesn't work in IE: height of (contentRel div is set to 400px - same as height of wrapper div).
Does anybody know how to fix it?
Here is my problem description (maybe it is another solution for it):
I have an outer div with height set to some px values (wrapper div in example).
In that div I have several other divs which can be hidden dynamically by some JS code.
All divs except of 1 has some height. though it is unknown to me (component divs in example).
I want that one remaining div (content div in example) to:
a. Use all remaining height of wrapper div
b. Have a header of some predefined height (100% Component Header part in example above)
c. Have a child div with height "100% of content div" - "height of header" (100% Component Content in example above)
d. To not to be taller than "height of wrapper div minus sum of heights of component divs" (scrollbars are ok)
I know it looks like a question that has been asked many times, but I just couldn't find the solution to that very specific situation.
Here's the basic wireframe of my layout :
Basically, I've got a few divs with different backgrounds that take 100% width and 100% height of the browser window. Within each and every of them is another div that takes 50% width of its parent but has a variable height, depending on its content.
I'd like all of these divs-within-a-div to be vertically align.
Now, I've read that putting a display:table-cell and a vertical-align:middle on the parent should work, but in this case it just seems to mess things up. :-/
My code:
<head>
<style>
html, body {
height: 100%;
}
body > div {
width: 100%;
height: 100%;
background-size: cover;
}
.centered {
width: 50%;
margin: 0 auto;
background: rgba(0,0,0,0.4);
padding: 50px 0 30px 0;
}
</style>
</head>
<body>
<div id="pic_1">
<div class="centered">content</div>
</div>
<div id="pic_2">
<div class="centered">content</div>
</div>
<div id="pic_3">
<div class="centered">content</div>
</div>
</body>
Thanks for your help!
Set a grandparent element to be display:table; height:100% and the parent element to be display:table-cell; vertical-align:middle.
See "Method 1" here for an example.
Also, note that your markup should not use class="centered"; use a semantic class name instead.
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.
I have div that contains 2 divs in it. One of the child divs has static height 2em, and I want the other one to vertically fill the rest of the space of the parent div. How do I do this?
Edit: I need the parent div to fill the screen.
This depends on exactly what you want to achieve. Getting a fixed top and variable bottom where the container is only as large as it needs to be for the two children.
Assuming:
<div id="parent">
<div id="top"></div>
<div id="bottom"></div>
</div>
use:
#top { height: 2em; }
and the bottom div will be as large as it needs to be. You can make the bottom fixed height and achieve the same thing.
But I suspect what you want to do is have the outer div fixed height (say 100%). That gets much harder. The problem is that there is no way in CSS of saying "height of 100% minus 2em" without using an (ill-advised) CSS expression.
One approach is to overlay the top with the bottom.
#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }
The top div actually overlays the bottom. This is fine so long as you don't want a border.
You can use Faux Columns if you're using an image for the background or just move the background color back to #parent to give the appearance of filling the screen with the #bottom div. It would fill the page by giving it a 100% height (as long as html and body also get height: 100%).
Example:
<head>
<title>TITLE</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#parent { height: 100%; background: #f08; }
#top { height: 2em; background: #80f; }
</style>
</head>
<body>
<div id="parent">
<div id="top">TOP DIV</div>
<div id="bottom">THE REST</div>
</div>
Since CSS is just about styling, giving the appearance of 100% height is the same as having 100% height. Right?