I want to create a full screen css layout.
<div id="divLeft">LEFT is ok</div>
<div id="divRight">
<div id="divTop">TOP is ok</div>
<div id="divCenter">CENTER should have liquid height</div>
<div id="divBottom">BOTTOM should be always bottom</div>
</div>
CSS
html{
height:100%
}
body{
height:100%
}
#divLeft{
float:left;
width:70px;
height:100%;
background:#6c9;
}
#divRight{
margin-left:70px;
height:100%;
background:#999;
color:#fff;
}
#divTop{
background:red;
text-align:right;
}
#divCenter{
background:blue;
text-align:center;
}
#divBottom{
background:green;
text-align:center;
}
Here is jsfiddle
So, problem is with the #divCenter (should have liquid height) and #divBottom (should be always at the bottom of the screen).
You can achieve this easily with the calc() function, though it isn't supported below IE 9 and mobile support is quite bad. All you need to do is give #divCenter a height of 100% minus the 20px + 20px of height from its siblings. To have the footer appear on the bottom, you need to relatively position its containing block and then absolutely position the footer and place it at the bottom (bottom: 0;).
http://jsfiddle.net/gpwD4/6/
Assuming that #divTop and #divBottom have fixed heights, you can do this:
#divRight{
position: relative;
}
#divCenter{
position: absolute;
top: (height of #divTop)
bottom: (height of #divBottom)
left:0;
right:0;
}
#divBottom{
position: absolute;
left:0;
bottom:0;
right:0;
}
LIVE DEMO
Related
How to make a cross browser solution where an element is vertical aligned?
http://jsfiddle.net/e2yuqtdt/3/
This works in both Firefox and Chrome, but not in IE11
<div class="page_login">
<div>vertical-align:center; text-align:center</div>
</div>
html, body {
height:100%;
}
.page_login {
display:flex;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
}
update
When the centered element is higher than the viewport height the background is only 100% and not 100% scroll height
http://jsfiddle.net/e2yuqtdt/8/
html, body {
min-height:100%;
height:100%;
}
.page_login {
display:flex;
min-height:100%;
height:100%;
width:100%;
background:#303030;
}
.page_login > div {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
How to make a cross browser solution where an element is vertical
aligned?
Take a look at this fiddle: http://jsfiddle.net/5ry8vqkL/
The technique applied there is using the "display: table". Here is an article for an in-depth view of the approach http://css-tricks.com/centering-in-the-unknown/
Supported browsers can be seen here: http://caniuse.com/#search=table-cell
HTML:
<div class="container">
<div id="page-login">
<div class="panel">Some content</div>
</div>
</div>
CSS:
html, body {
min-height:100%;
height:100%;
}
.container {
display: table;
height:100%;
width:100%;
background:#303030;
}
#page-login {
display: table-cell;
vertical-align: middle
}
.panel {
height: 100px;
background-color: #fff;
}
You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:
.page_login > div {
margin:auto;
background:#fff;
min-height:100px;
width:200px;
height:200px;
}
http://jsfiddle.net/e2yuqtdt/6/
As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.
Update: Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space
Actually - have achived it using tables divs
http://jsfiddle.net/e2yuqtdt/14/
<div>
<div id="div1">
<div id="div2">vertical-align:center; text-align:center</div>
</div>
</div>
#div1 {
display:flex;
height:100%;
width:100%;
background:#303030;
}
#div2 {
margin:auto;
background:#fff;
height:800px;
width:200px;
}
I know this update is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I'm having problems getting my footer to stick to the bottom of the page when there are position absolute elements in the main container. Here's a fiddle to demonstrate.
<div class="content-wraper">
<div class="side-nav"></div>
</div>
<div class="footer"></div>
.content-wraper {
background-color:blue;
min-height:100px;
position:relative;
width:500px;
}
.side-nav {
background-color:red;
height:3000px;
position:absolute;
top:0px;
left:0px;
width:200px;
}
.footer {
background-color:black;
position:absolute;
bottom:0px;
width:200px;
height:50px;
}
Change position: absolute; in .footer to position: fixed;
Updated fiddle
UPDATE
To fix the footer to always be below the absolutely positioned side-nav using jQuery try this:
$(".footer").css("top", $(".side-nav").height());
Example Fiddle
absolute positioning refers to window size, not content size, so if content is higher than window, you won't get the effect you want.
Try different approach:
sticky footer
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
+It's workging now
I'm trying to have a bar on the bottom of the page with a width of 1024px aligned on the center.
I already tried margin:0 auto and text-align:center.None worked.
Here is my code:
<style>
.bf_footer{
position:fixed;
bottom:0px;
width:1024px;
background:#000;
height:20px;
padding-bottom:5px;
left:50%;
margin-left:-512px;
}
</style>
<div class="bf_footer"></div>
You can use javascript for calculation of the position like this:
$("div.bf_footer").css({
left: ($(window).width() / 2) - ($("div.bf_footer").width() / 2)
});
you can siply have a parent element and set margin:0 auto; then you can make your effect.
<div style="background:blue;height:0px;width:300px;margin:0 auto;">
<div class="bf_footer"></div>
</div>
css
.bf_footer{
position:absolute;
width:300px;
background:#000;
height:20px;
bottom:0;
}
http://jsfiddle.net/MvPsd/
The best way that I have found to do this is:
<style>
.divtobealigned{
position:fixed;
background:grey;
width:400px;
left:50%;
margin-left:-200px; <!-- Half of the width-->
}
</style>
<div class="divtobealigned">Div with position absolute centered on the screen.</div>
http://jsfiddle.net/vinicius5581/9Jk9k/