How do I create a div that has a fixed height and stays on the bottom of the page, and another one above it occupying the remaining vertical space?
Something like this should achieve what you're looking for.
Try like this
See Demo
Use height: inherit for your first div which takes the remaining height available
html
<div id='container'>
<div id='first'>
First Div content
</div>
<div id='second'>
Second div content
</div>
</div>
Css
#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}
#first{
height: inherit;
background-color: red;
}
I don't think any of the other examples really work nicely when the page is resized.
This type of thing is best accomplished with a few lines of javascript, as its not something that CSS does a great job of generally speaking.
See here for a working demo. mod.it requires that you view the demo in chrome but the code in the demo is cross browser and will work anywhere.
https://mod.it/6hQaRsEL
Related
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
I have three divs.. Container, Content_1 and content_2.
What I want to do is position the two content divs inside the container, side by side. now I have half accomplished that.. But the thing is I want my container to automatically resize to the div that is highest. so the container height must be auto. With the code I have written on JSFiddle, the content_2 on the right sets the container height, but the content_1 on the left does not.. Please help I am completely stuck.
HTML:
<div class="container">
<div id="content_1">
</div>
<div id="content_2">
</div>
JSFiddle
Is this what you wanted?
jsFiddle Demo
.container {
background-color: #000;
width: 980px;
min-width: 980px;
height: auto;
position: relative;
margin: 50px auto 100px auto;
top:60px;
bottom:900px;
border:1px solid #000;
overflow:auto; /* <========= */
}
your divs closing tag is open: </div to </div>
The problem is that you forgot the clearfix. There are a couple of ways to do a clearfix on google, but the one that will fix this problem is adding overflow:hidden to your container div.
Check out my example on http://cdpn.io/sEwfI
.container
overflow: hidden;
I couldn't seem to find a reference to this problem anywhere after lengthy searching. This probably means I am missing basic concepts but I am going to go ahead and ask anyway. I am trying to have a float:left <div> overlay a background image. A simplified version of the problem is below (with a div representing the image for quick reproducibility)
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='float: left; background-color: yellow; width: 100px; height: 100px'>
FLOATING IMAGE
</div>
It seems the absolutely positioned div overlays the float. How do I sort this out - without resorting to the background-image property of the parent (this is not an option) ?
Set position:relative; on the floating element and assign a z-index:1; to the background and z-index:2; to the floating image.
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='position:relative; float: left; background-color: yellow; width: 100px; height: 100px; z-index:2;'>
FLOATING IMAGE
</div>
EDIT: here's a jsfiddle for your reference: http://jsfiddle.net/exUm7/1/
Div overlay is not a good idea other than if you are doing game kind of thing. I think is batter if you plan your layout as much as without overlay. It will make you easy.
but if you must need to do this. Here we go
<div style='float:left; background-color:blue; width:500px; height:500px; z-index:1'>
BACKGROUND DIV
</div>
<div style='float:left; margin-left:-500px; background-color:yellow; width:100px; height:100px; z-index:2'>
FLOATING IMAGE
</div>
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}
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.