I am trying to make 3 div's in row design. Where the header and footer have fixed height.
The center div expands to fill the empty space. I have tried but the closest I got is the code below. Still having problems with the center div which expands over the footer div.
html:
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
css:
#rowOne {
width: 100%;
height: 50px;
background: green;
}
#rowTwo {
width: 100%;
background: limegreen;
height:100%;
overflow:hidden;
}
#rowThree {
width: 100%;
position: fixed;
clear: both;
background: green;
position:absolute;
bottom:0;
left:0;
height:50px;
}
#container {
height: 100%;
}
Three Row pure CSS
I know this post is getting on a bit, but despite claims to the contrary, you can do this very simply with CSS. No need for JavaScript, jQuery, CSS 3 hacks etc.
Here's a couple of jsf's that show fixed header and footer and dynamic body div.
This first one shows fixed pixel height header and footer and dynamic body EXACTLY as you wanted in your image
http://jsfiddle.net/LBQ7K/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 50px;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
background: #0f0;
}
The second shows you can use the same technique to have dynamic headers & footers.
http://jsfiddle.net/reqXJ/
<body>
<div class="header"><p>Header</p></div>
<div class="cssBody"><p>Hello World</p></div>
<div class="footer"><p>Footer</p></div>
</body>
html, body, {
height: 100%;
}
.header {
position: absolute;
top: 0px;
height: 15%;
width: 100%;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
height: 15%;
width: 100%;
background: #00f;
}
.cssBody {
position: absolute;
top: 15%;
bottom: 15%;
width: 100%;
background: #0f0;
}
This is a very common problem, one of the solutions that worked for me is from the following website:
http://ryanfait.com/sticky-footer/
with the code:
http://ryanfait.com/sticky-footer/layout.css
and another popular choice:
http://www.cssstickyfooter.com/
If this does not meet your needs, let us know, we can help more.
Seems like you are try to do a sticky footer, well... you will need a few hacks:
HTML:
<div id='container'>
<div class="header">
<h1>Sticky Footer!</h1>
</div>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
<div class="push"></div>
</div>
<div id='footer'></div>
CSS
.container {
min-height: 100%;
height: auto !important;height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push{
height: 142px; /* .push must be the same height as .footer */
}
Note: Replace the footer and push height for your fixed height and don't forget to insert the push div after the rows in the container.
You can fake this by absolutely positioning the rows, and adding padding to top and bottom for the middle row. You cannot do this like you were doing with tables
#container { position:relative; height:800px } // needs height
#rowOne, #rowTwo, #rowThree { position:absolute }
#rowOne { top:0; left:0 }
#rowThree { bottom:0; left:0 }
#rowTwo { left:0; top:0; padding:50px 0; } // top and bottom padding 50px
could this line of code help?
DEMO
Try this:
#container{
...
position:relative;
}
#content{
min-height: xxx;
}
This should exactly do what you want:
html code:
<div id="header">
header
</div>
<div id='container'>
<div id='rowOne'>one</div>
<div id='rowTwo'>two</div>
<div id='rowThree'>three</div>
</div>
<div class="clearfix"></div>
<div id="footer">
footer
</div>
CSS code:
.clearfix {
clear: both;
}
#header, #footer {
background-color: red;
}
#container {
width: 100%;
}
#rowOne {
width: 25%;
background: green;
float: left;
}
#rowTwo {
width: 55%;
height: 100px;
background: limegreen;
float: left;
}
#rowThree {
width: 20%;
background: green;
float: left;
}
You can also test it on jsFiddle
Have you tried looking at a CSS framework? They come with default classes you can use to set up something like that within a few short minutes. They also help producing cleaner html and interfaces that you can easily redesign at a later time.
http://twitter.github.com/bootstrap/index.html
I hope you are looking like this :- DEMO
CSS
#container {
height: 100%;
}
#rowOne {
height: 50px;
background: green;
position:fixed;
left:0;
right:0;
}
#rowTwo {
background: limegreen;
min-height:500px;
position:absolute;
left:0;
right:0;
top:50px;
}
#rowThree {
position: fixed;
background: green;
bottom:0;
left:0;
right:0;
height:50px;
}
HTML
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
In response to your comment on jedrus07's answer:
all this sollutions expand the center div behind the footer div. I want a solution with each div having only his own space.
The only way to do that is with CSS 3 calc(). If you don't need to support very many browsers, that's an option, and here's a demo of it in action:
http://jsfiddle.net/5QGgZ/3/
(Use Chrome or Safari.)
HTML:
<html>
<body>
<div id='container'>
<div id='rowOne'>row 1</div>
<div id='rowTwo'>row 2</div>
<div id='rowThree'>row 3</div>
</div>
</body>
</html>
CSS:
html, body, #container {
height: 100%;
}
#rowOne {
height: 50px;
background: #f00;
}
#rowTwo {
height: -webkit-calc(100% - 100px);
background: #0f0;
}
#rowThree {
height: 50px;
background: #00f;
}
If you want wider browser support, you're going to have to go with a sticky footer solution like the ones jedrus07 mentioned, or Tom Sarduy's answer.
One way would be using Jquery to set the minimum height of the middle div to be the height of the screen, minus the height of the other two divs (100px)
something like this should work:
$(document).ready(function() {
var screenHeight = $(document).height() - 100px;
$('#rowTwo').css('min-height' , screenHeight);
});
Related
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
</div>
The css look like this
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width:500px;
height:420px;
margin:0 auto;
position: relative;
top: -200px;
}
while pushing a negative top, the silbing div "footer" will not move up accordingly. That's a large empty space in between two divs
This is my code
http://codepen.io/adrianmak/pen/qZRqwy
Give margin-top:-200px instead of top:-200px. As it is relative element. It will take space even if you are moving it by giving negative top.
.featured {
background: yellow;
width:500px;
height:420px;
margin:-200px auto 0;
position: relative;
}
Working Fiddle
I hope you want this
.wrapper{
position: relative;
}
.header {
background: green;
height:620px;
}
.footer {
background: blue;
height:200px;
}
.featured {
background: yellow;
width: 500px;
height: 420px;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 200px;
}
<div class="wrapper">
<div class="header">
</div>
<div class="featured">
</div>
<div class="footer">
</div>
</div>
It's because you are using position relative. When you add top-200px it move that <div> up but did not leave his space, you need to use position absolute or negative margin(-ve).
jsfiddle.net/zrsgb2rd/
I have following Scenario
http://jsfiddle.net/EYGhf/63/
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>
</div>
I want third div to be next to first div, first and second would be in same column, if right space is not available, i.e. on mobile, third div would float to bottom.
Current CSS that is applied goes as
.wrapper{
widht:250px;
}
#first_div {
background: yellow;
height: 200px; /* Just Example, Actual is Dynamic*/
width:100px;
float:left;
}
#second_div {
background: cyan;
height: 300px;/* Just Example, Actual is Dynamic*/
width:100px;
clear:left;
}
#third_div{
width:100px;
float:left;
background:blue;
}
You could set position:absolute on 3rd item, and use media queries set it back to static for mobile.
JSFiddle Demo: http://jsfiddle.net/ytr1j3r7/ (resize the output frame and see)
body {
margin: 0;
}
.wrapper {
position: relative;
max-width: 400px;
}
.wrapper > div {
height: 100px;
width: 200px;
}
#first_div {
background: yellow;
}
#second_div {
background: cyan;
}
#third_div {
background: teal;
position: absolute;
top: 0;
right: 0;
}
#media (max-width: 399px) {
#third_div {
position: static;
}
}
<div class="wrapper">
<div id="first_div">first div</div>
<div id="second_div">second div</div>
<div id="third_div">third div</div>
</div>
Maybe anyone could help me with divs structure which would represent image above and if there are any special css parameters of holder div, or other add them too?
The are many ways to do that, one of them is with relative-float
<div style="position:relative">
<div style="float:left; width: 50px; height:100px; background-color:red;">Block1
</div>
<div style="float:left; width: 50px; height:100px; background-color:blue;">Block2
</div>
<div style="float:left; width: 50px; height:100px; background-color:green;">Block3
</div>
</div>
This generates something like
How about:
<div>a</div>
<div>b</div>
<div>c</div>
with CSS:
div {
width: 33%;
border: 1px solid red;
float: left;
}
?
If you are asking for html code to get the visual done as shown in your question, this is the place http://csslayoutgenerator.com/, where you can generate the html layouts.
three div :
<div></div><div></div><div></div>
with css :
div {
display: inline-block;
}
put into these div all content you want.
You can also use float:left instead of display property.
If you want a liquid layout (first and last div have a fixed width and the middle one take all the needed space), you can :
.firstDiv {
float: left;
width: 200px;
}
.lastDiv {
float: right;
width: 200px;
}
.middleDiv {
margin-left: 200px;
margin-right: 200px;
}
you can also use absolute positioning :
body {
position: relative;
}
.firstDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
width: 200px;
}
.lastDiv {
position: absolute;
top: 0px;
bottom: 0px;
left: 200px;
right: 200px;
}
.middleDiv {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 200px;
}
Working Fiddle
CSS:
.div {
display:inline-block;
width:150px;
height:400px;
margin:0;
}
#one {
background:green;
}
#two {
background:red;
}
#three {
background:blue;
}
HTML:
<div class="div" id="one"></div>
<div class="div" id="two"></div>
<div class="div" id="three"></div>
You can use CSS display property. And Specifying inline-block.
Take look at this JS Fiddle code:
<div class="_1">Red</div>
<div class="_2">Green</div>
<div class="_3">Blue</div>
div {
display:inline-block;
width:100px;
height:200px;
}
._1 {
background-color:red;
}
._2 {
background-color:green;
}
._3 {
background-color:blue;
}
First, check out a working example of the layout I have:
http://jsfiddle.net/EPC8c/2/
What I'm trying to do is adding a top margin to this. Since I have most of this built on 100% height, things get a little weird when trying this: http://jsfiddle.net/EPC8c/1/ (fixed link)
The fluid layout now leaves the footer being pushed down past 0 or 100% of the page. This is probably working as intended, but I'm trying to find a solution to not cause this.
Any help with this would be amazing.
HTML
<div id="container">
<header></header>
<div id="content"></div>
<footer></footer>
</div>
CSS
html, body {
background: #ff3333;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
background: #FFF;
margin: 0 auto;
width: 200px;
min-height:100%;
}
header {
height: 60px;
background: #888;
}
#content {
background: #FFF;
min-height: 200px;
padding-bottom: 60px; /*FOOTER HEIGHT*/
}
footer {
position:absolute;
bottom: 0;
width: 200px;
height: 60px;
background: blue;
}
Here's a solution, courtesy of this question: CSS 100% height with padding/margin
JSFiddle:
http://jsfiddle.net/EPC8c/5/
HTML:
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
}
It's admittedly not the best solution and it relies on percentage margins, but one route would be to wrap it all in an absolutely positioned div with a percentage upper padding and a negative (equal) percentage bottom padding. Like this:
http://jsfiddle.net/EPC8c/3/
<div id="wrapper">
<div id="container">
<header></header>
<div id="content">
</div>
<footer></footer>
</div>
</div>
CSS:
#wrapper {
position: absolute;
width: 100%;
height: 90%;
padding-top: 10%;
padding-bottom: -10%;
}
Again me with my divs =(.
I have this:
<div id="header"></div>
<div id="body">
<div id="..."></div>
<div id="..."></div>
<div id="content"></div>
</div>
<div id="footer"></div>
and css:
#body { width: 100%; margin 0 auto; }
#content { position: absolute; height: 200px; width: 100%; }
#footer { height: 63px; clear:both; }
Now result:
content div with much text and footer under text.
How can I make my footer under all content-area?
I've encountered this situation several times. I've been using sticky footers. It's widely compatible with several browsers and just seems to work.
If you use this styling you will see the (blue) #footer under the (red) #content as you requested:
#body {width: 600px; margin 0 auto; }
#content {position: relative; height: 200px; width: 600px; background-color: red; }
#footer {height: 63px; clear:both; width: 600px; background-color: blue; }