I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.
I would like to convert this to a tableless layout.
Note: header and footer have to be set to a fixed height in pixels (50px is ok).
The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.
You can do it with table style CSS properties, but still retain table less markup (which is still a win).
Example
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
jsFiddle.
'Multiple absolute co-ordinates' is a nice way to achieve this. This is when you absolutely position a box, then give it both top and bottom co-ordinates. Without specifying a height, you get a box which wants to be 10px from the top, and 10px from the bottom edges of its parent.
Here's an example
There is an IE6 specific style you'll need to add, if you care about that browser.
Here's an article on the technique (plus the IE6 fix) - it's a good one to know, even if you don't use it for this problem.
You haven't said anything about heights of your sub elements, so I have had to make some presumptions. You could use percentages if you wanted.
<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}
#header {
height:15%;
width:100%;
background-color:red;
}
#center {
height:75%;
width:100%;
background-color:blue;
}
#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>
<body>
<div id="mainContainer">
<div id="header">Header</div>
<div id="center">Center</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
Related
I know that this is not an uncommon problem, as a bit of Googling threw up quite a few pages with similar problems to my own. But try as I might I can't fix it so here goes:
I am currently building the website to my rugby team. It has a two column layout, with a main area and a sidebar. The relevant HTML is roughly
<div id="wrapper">
<div id="maincolumn"></div>
<div id="sidebar"></div>
<div class='clear'></div>
</div>
From some of the websites, I have gleaned that I need to set body and html to 100% and all the containers, so I have:
html, body, #wrapper, #innerwrapper, #sidebar { height: 100%; min-height: 100%;
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding-right:5%; }
.clear { clear:both; }
The problem I am having, is that when #maincolumn has a lot of content, the sidebar does not expand all the way down to the bottom of the page which is the behaviour I would like. I made some progress by setting all the containers to 100% and then adding the clear element, but that still only expands it a short way.
Instead of floating, you can use CSS tables:
#wrapper {
display: table;
}
#sidebar, #maincolumn {
display: table-cell;
}
Demo
Since you want both columns to have the same height regardless of the amount of content within them, first you have to understand that setting height:100% sets the height in relation to the width of the parent div(or containing block).
So if that's the case, here's what you can do:
#wrapper{
height:900px;
}
#sidebar{
height:100%;
}
#maincolumn{
height:100%;
}
DEMO
HTML :
<div id="wrapper">
<div id="maincolumn">vgnhngbbv hbcv nfvfbngbc</div>
<div id="sidebar">dfrtnjnbc ghm gbgfnbvfnythgfbbfg</div>
<div class='clear'></div>
</div>
CSS :
html, body, #wrapper, #maincolumn, #sidebar { height: 100%; min-height: 100%;}
#wrapper { max-width:900px; margin:0 auto; width:90%; }
#sidebar { float: right; width: 35%; padding:2%; background-color:#f7f7f7; }
#maincolumn { width:56%; float:left; padding:2%; background-color:#ff0000; }
.clear { clear:both; }
DEMO
I can't figure out why the height of the #container div is calculated correctly at 200px when a display:table-row is applied to the #header div and it's too large when a display:table-caption is applied to the #header div.
I've tested this in Chrome 35
Does someone know why this is the case and/or is there a simple fix?
( preferably without javascript or adding extra divs)?
I want the #header div's height to be as small as it's content, and it's width to be 100% of the #container div, and the #container to fit exactly in the #main div.
jsfiddle: http://jsfiddle.net/2SKY4/
CSS:
#main {
width: 200px;
height: 200px;
background-color:#ff0;
}
#container {
background-color: #0f0;
width: 90%;
display:table;
height:100%;
}
#header {
background-color:#F0F;
display:table-caption;
}
#splitpanel {
display:table-row;
background-color:#0ff;
}
#leftpanel {
background-color: #f00;
overflow: scroll;
display: table-cell;
}
#rightpanel {
background: #00f;
overflow: scroll;
display: table-cell;
}
HTML:
<div id="main">
<div id="container">
<div id="header">Header</div>
<div id="splitpanel">
<div id="leftpanel"></div>
<div id="rightpanel"></div>
</div>
</div>
</div>
I am not sure what you want. the fiddle already has like you want it seems.
you are better off showing snapshots and say what you want. you are using "display" of different types which also doesnt make much sense. can you please describe what structure you want in snapshot?
I have layout comprising of a 100% width header, 2 column content divs (30-70% width) and a 70% width footer (visible only in the bottom of right div).
My HTML mark up is like:
<section id="mySection" >
<header id="headerTop">
</header>
<div id="wrapperLeft">
</div>
<div id="wrapperRight">
</div>
<footer id="footerRight">
</footer>
</section>
My CSS is
#mySection
{
margin:0 auto;
padding:0;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
#headerTop
{
position:absolute;
top:0;
left:0;
height:40px;
width:100%;
overflow:hidden;
}
#wrapperLeft
{
position:absolute;
top:40px;
left:0;
width:30%;
bottom:0;
overflow:auto;
}
#wrapperRight
{
position:absolute;
top:40px;
left:30%;
width:70%
bottom:30px;
overflow:auto;
}
#footerRight
{
position:absolute;
left:30%;
bottom:0;
width:70%;
overflow:hidden;
}
I would like to know if I can design this better such that if i hide the left or right div, the other div is displayed at 100%. I think i can change the CSS dynamically via javascript and adjust the left and width values for the other div, but it is getting messy and would like to avoid it if possible.
Ideally would love to call show or hide on the div and the other div automatically adjusts itself to 100% width.
I have no control over the height of the content in either div and would want the browser to display scrollbar when the content height exceeds the window.
Thanks in advance for your help.
I would add a wrapper to the divs so you can float then instead of positioning then absolutely. This way you can make at least one div 100% wide. For instance the right div. If you want both divs to be dynamic in size you will have to use jquery. For instance adding classes if you want to keep the jquery to a minimal.
example HTML:
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
example CSS :
#main{
position:relative;
overflo:hidden // This will make the container grow with the children
width:960px;
}
#left{
width:200px;
float:left;
height:100%;
}
#right{
float:left;
width:100%;
height:100%;
}
Example of CSS with additional classto toggle divs
#main.only-left #left{
width:100%;
}
#main.only-left #right{display:none;}
I think I know what you're talking about. I've created a little example here. Basically set 30% on the sidecolumn, and display: block; on the main column. Click on the body anywhere to toggle the side column to show how the main column adapts... is this going in the right direction?
Codepen sketch
HTML
<div class='wrapper'>
<header>Header</header>
<section>
<aside>Sidebar</aside>
<article>Main article</article>
</section>
<footer>Footer</footer>
</div>
CSS
body {
margin: 0;
padding: 0;
}
section {
overflow: hidden;
position: relative;
}
header {
background: crimson;
height: 100px;
width: 100%;
}
aside {
background: #efefef;
float: left;
height: 300px;
width: 30%;
}
aside.hide { display: none; } /** For demo purposes **/
article {
background: #ccc;
display: block;
height: 300px;
}
footer {
background: crimson;
float: right;
height: 100px;
width: 70%;
}
jQuery (just for hideToggle example)
$('html').on('click', function(){
$('aside').toggleClass('hide');
});
UPDATE: Here's an example with a little assitance from jQuery for class toggling. Could probably be generalized more... http://codepen.io/kunalbhat/pen/kuAcg
I'm stuck with this problem:
I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.
Inside this div I want two full-width divs on top of each other:
The (#upper) div's content automatically determines its height.
The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height
Currently I have the following css ...
body {
margin:0;
padding:0;
}
#container
{
position: relative;
width: 500px;
height: 100%;
max-height: 100%;
background-color: #f00;
}
#upper {
width: 100%;
background-color: #0f0;
}
#lower {
width: 100%;
background-color: #00f;
overflow: auto;
}
... as well as this code:
<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>
How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?
How can (#lower) be scrollable (only up and down, not left to right!)?
Thank you very much for your feedback, I hope we can all learn from this.
You should set your html and body elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.
I think this may help you:
<head>
<title></title>
<style>
.upper{
height:50px;
border: 1px solid groove;
}
.lower{
height:calc(100% - 50px);
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="height:500px; border:1px solid red; position:relative;">
<div class="upper"></div>
<div class="lower"></div>
</div>
</body>
This will take 50px out the lower div
For a pure CSS solution, use display: table-row.
<style>
*{
box-sizing: border-box;
margin:0;padding:0;
}
html, body, #container{
height: 100%;
}
#container{
display: table;
height: 100%;
}
#upper, #lower{
display: table-row;
}
#upper{
height: 100px;
}
</style>
<div id="container">
<div id="upper">bla</div>
<div id="lower">bla</div>
</div>
This solution only works if the height of the content is not more than 100%, see here: https://stackoverflow.com/a/13668087/603569
Here a 100% css alternative:
<div style="height:100%;">
main div
<div style="height:100%;padding-bottom:200px;">
header div
</div>
<div style="position:relative;height:200px;top:-200px;">
footer div
</div>
</div>
Remember that all parent elements, including body and html, must have their height set too.
i have a mind bobbling question.
I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:
#container {
position:absolute;
top:0;
bottom:0px;
left:0;
right:0;
margin:20px;
}
but then it wont expand in height with content.
Anybody know the divine technique for this?
I'm pretty sure it isn't possible to do with a single element, but if you don't mind having 3 spacer div elements, this solution works in all browsers:
<html>
<head>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin-left: 20px;
margin-right: 20px;
margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
background-color: #ccc;
}
.spacer.edge {
background-color: white; /* same as body background */
}
.spacer {
height: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="spacer edge"></div>
<!-- content here -->
<div class="spacer"></div>
</div>
<div class="spacer edge"></div>
</body>
</html>
Here's a fiddle to play with: http://jsfiddle.net/dTyTW/
I you want to expand the div with the content , then you need to set position : relative and in order to stick towards the bottom padding-bottom also need to be set.
#container {
position:relative;
top:20px;
bottom:20px;
left:20px;
right:20px;
padding-bottom: 80%;
border:1px solid red;
}
Values can be adjusted as per the requirement.
Try here
Remove the margin and give each position a 20px.
Also remove the bottom.
Add padding-bottom:20px;
#container {
position:absolute;
top:20px;
left:20px;
right:20px;
padding-bottom:20px;
}
http://jsfiddle.net/jasongennaro/w7dQP/3/
EDIT
If you are not opposed to using some jQuery, you could also do this
var h = $(document).height();
var h2 = $('#container').height();
if(h2 < h){
$('#container').height(h);
}
This ensures that if the div is smaller than the browser viewport, it will expand to fit it.
Once the text is as big or bigger, the styles will take care of it.
http://jsfiddle.net/jasongennaro/w7dQP/8/
<html>
<style>
body
{
margin:0px;
}
div
{
position: absolute;
padding: 20px;
}
img
{
position: relative;
width: 100%;
}
</style>
<body>
<div>
<img src="http://manual.businesstool.dk/screen.jpg" />
</div>
</body>
</html>
Use the padding property... look up the box model.