CSS layout with fixed and liquid columns - html

I'm having a problem creating a layout that's partly liquid. The layout has to have 100% width and height but it shouldn't have scrollbars (overflow: hidden;).
On the image above shows what I'm trying to achieve. As you can see:
The header has to be fixed - 110px with 100% width.
Two divs wrapped via a container div. The blue one needs to be with fixed width 130px & 100% height, while the green one needs to be with liquid width and 100% height.
Here is my current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
float: left;
}
#content {
height: 88%;
width: 100%;
padding: 0px;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width: 91%;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div class="spacer"></div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
There are a couple of problems with this code:
It doesn't work on various resolutions (800x600,1024x768, 1280x1024 and etc)
The "content" div doesn't always fill the page to the end.
The green div would go below the blue one if you resize the page to lower resolutions.
I guess I might be doing something TERRIBLY wrong here but I'm not a designer so is there somebody who could point me to "the right way" of solving this problem?

Take a look here http://jsfiddle.net/bmqPV/2/
you have the left set to 100px and the right to 91%, so if 100px is greater than 9% it will go to the next line.
EDIT, here is a new fiddle http://jsfiddle.net/bmqPV/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
.spacer {
clear: both;
}
#header {
background: black;
width: 100%;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
z-index:3;
}
#content {
height: 100%;
width: 100%;
padding: 0;
margin: 0px;
position: relative;
}
#left {
background: #1664a0;
height: 100%;
width: 100px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
width: 100%;
}
#wrapper
{
position: relative;
height: 100%;
width: 100%;}
.contentcontainer {
padding-top:100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
My Header
</div>
<div id="content">
<div id="left">
<div class="contentcontainer">Left container</div>
</div>
<div id="right">
<div class="contentcontainer">Right container</div>
</div>
</div>
</div>
</body>
</html>​

You can achieve your result through a simple CSS with defining positions in #content & #right for better understanding please see the simple code:-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
{
padding: 0;
margin: 0px;
color: white;
}
html, body {
height: 100%;
width: 100%;
}
#header {
background: black;
height: 100px;
}
#content {
width:100%;
border:5px solid red;
overflow:hidden;
position:relative;
}
#left {
background: #1664a0;
height: 100%;
width: 130px;
float: left;
}
#right {
background: #4aa016;
height: 100%;
float: left;
width:100%;
position:absolute;
margin-left:130px;
}
</style>
</head>
<body>
<div id="header">
My Header
</div>
<div id="content">
<div id="left">Left container</div>
<div id="right">Right container</div>
</div>
</body>
</html>
see the demo:- http://jsbin.com/ajasey/17/edit

Related

How can i set the footer to the bottom of the page?

The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).

Child Div is not stretching to fit the contents of the browser window vertically.

I have a site with a google map canvas on it. It has a header, a footer, and a side panel on each side, a container div and a map canvas div.
The container div contains the side panels and the map-canvas div. My problem is that I cannot get the container div and all divs it contains to stretch to the contents of the browser window vertically.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
</div>
<footer id="footer"></footer>
</body>
</html>
CSS
#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
#map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
#panel { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
#panel2 { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
#header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
#footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }
I'm not sure what you want, but this should work quite well, I think.
But be sure you also set media queries for width and height to keep the page responsive when visited on smaller screen (eg. phone).
<!DOCTYPE html>
<html>
<head>
<style>
#wrapper {
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
}
#header, #footer {
position: absolute;
width: 100%;
height: 100px;
background-color: #F0F0F0;
}
#header {top: 0;}
#footer {bottom: 0;}
#container {
position: absolute;
top: 100px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#panel, #panel2 {
background-color: #CCC;
width: 200px;
min-height: 500px;
float: left;
}
#panel2 {
float: right;
}
#map-canvas {
min-height: 500px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header"></header>
<div id="container" >
<div id="panel"></div>
<div id="panel2"></div>
<div id="map-canvas"></div>
<div style="clear:both"></div>
</div>
<footer id="footer"></footer>
</div>
</body>
</html>

CSS 100% width is more that 100%

I'm learning CSS and I tried to create a simple layout.
I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Edit
Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.
Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".
I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it?
body {
margin: 0;
}
div {
border-radius: 10px;
}
#header {
z-index: 1;
background-color: #80B7ED;
border-top-left-radius: 0;
border-top-right-radius: 0;
top: 0;
height: 50px;
width: 100%;
position: fixed;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header">
</div>
<div class="left">
</div>
<div class="right">
</div>
<div id="footer">
</div>
</body>
</html>
Thanks
When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.
margin: 0;
padding: 0;
border: none;
Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.
box-sizing: border-box;
Here you go:
body{
margin:0px;
}
div {
border-radius: 10px;
}
#wrapper {
padding: 0%;
}
#wrap {
float: left;
position: relative;
width: 100%;
}
#header {
position:fixed;
width:inherit;
z-index:1;
padding:0px;
height:50px;
border-radius:10px;
background-color: #80B7ED;
}
.left {
background-color: #5A9DE0;
height: 400px;
width: 20%;
float: left;
position: relative;
}
.right {
background-color: #BFD9F2;
height: 400px;
width: 80%;
float: right;
position: relative;
}
#footer {
background-color: #80B7ED;
clear: both;
height:70px;
}
<html>
<body>
<div id="wrapper">
<div id="wrap">
<div id="header"></div>
</div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
See here jsfiddle
EDIT:
If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.
Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.

HTML Scrollbars not showing when text is larger then screen

I am making a website that uses numerous DIVs with a 100% height. Now when the text is bigger than the page I want the normal scrollbars to appear. Unfortunately they don't. and with trying overflow:auto anywehre, it gets worse and worse.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title><PageTitle> | Anga Designs</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]-->
<!-- /Stylesheets -->
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<!-- /Scripts -->
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- /Meta Tags -->
</head>
<body>
<div id="bgstripe"></div>
<div id="outercontainer">
<div class="leftbar"></div>
<div id="innercontainer">
<div id="header">
<div class="leftbar"></div>
<div class="innercontent">
</div>
</div>
<div id="content">
<div>
<span class="articletitle">Page Title!</span>
<div class="articletitlebar"></div>
</div>
<div class="articletext"><p>
Put your text here
</div>
</div>
</div>
<div id="faderight"></div>
</div>
<!-- /container -->
</body>
</html>
CSS
body, html {
margin: 0;
background-color: #eeeeee;
height: 100%;
font-family: Tahoma;
overflow: auto;
}
#bgstripe {
float: left;
background-color: #67a7ff;
width: 50%;
height: 100%;
}
#faderight {
position: relative;
float: right;
background: url('../images/layout/fade-right.jpg');
width: 50px;
height: 100%;
}
#outercontainer {
position: relative;
margin: auto;
width: 1000px;
height: 100%;
background-color: #2a5d95;
}
#innercontainer {
position: fixed;
float:left;
width: 950px;
background-color: #2a5d95;
}
.leftbar {
position: absolute;
background: url('../images/layout/leftbar.png');
width: 50px;
height: 100%;
}
.innercontent {
position: relative;
float: left;
background-color: #2a5d95;
height: 100%;
width: 100%;
margin-left: 50px;
}
#header {
position: relative;
float: left;
width: 950px;
height: 200px;
}
#content {
position: relative;
float: left;
width: 100%;
height: 100%;
}
.articletitle {
background-color: #003366;
padding: 10px 10px 10px 60px;
font-size: 20px;
font-family: Georgia;
color: #eeeeee;
}
.articletitlebar {
position: absolute;
width: 50px;
height: 40px;
background: url('../images/layout/articletitlebar.png');
margin-top: 10px;
}
.articletext {
display:block;
position: absolute;
margin-left: 70px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
width: 700px;
min-height: 500px;
}
Anyone who can help me with this? I'm totally lost right now..
Online sample: http://rune.blupfis.nl/wendy/
position:fixed on #innercontainer is part of the problem, if not the whole issue. That will act like an absolutely positioned element and be removed from the normal flow.
The problem here is that the height of your contentdiv is set to 100%. This makes it expand so that it is the same height as its contents. If you try something more like this:
#content {
float: left;
height: 500px;
overflow: auto;
position: relative;
width: 100%;
}
you should see the scroll bars appearing (but some other styling may be lost now).

Content div not filling up the remaining space

Basically #content is not obeying the height: auto attribute.
What am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title id="title" runat="server">AMIDS: Advanced Management Information Data Store</title>
<style type="text/css">
#container
{
background-color: White;
height: 100%;
min-height: 100%;
min-width: 600px;
width: 100%;
}
#header
{
height: 50px;
overflow: hidden;
width: 100%;
}
#headerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderLeft.jpg');
float: left;
height: 50px;
width: 5px;
}
#headerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderCenter.jpg');
float: left;
height: 50px;
width: 99.2%;
}
#headerRight
{
background-image: url('/Amids/App_Themes/Default/Images/HeaderRight.jpg');
float: left;
height: 50px;
width: 5px;
}
#menu
{
background-image: url('/Amids/App_Themes/Default/Images/Menu.jpg');
height: 20px;
width: 100%;
}
#content
{
background-color: Pink;
height: auto;
width: 100%;
}
#footer
{
height: 40px;
overflow: hidden;
width: 100%;
}
#footerLeft
{
background-image: url('/Amids/App_Themes/Default/Images/FooterLeft.jpg');
float: left;
height: 40px;
width: 5px;
}
#footerCenter
{
background-image: url('/Amids/App_Themes/Default/Images/FooterCenter.jpg');
float: left;
height: 40px;
width: 99.2%;
}
#footerRight
{
background-image: url('/Amids/App_Themes/Default/Images/FooterRight.jpg');
float: left;
height: 40px;
width: 5px;
}
* html #container
{
height: 100%;
}
*
{
margin: 0;
padding: 0;
}
html, body, form
{
border: none;
height: 100%;
}
</style>
</head>
<body>
<form id="form" runat="server">
<div id="container">
<div id="header">
<div id="headerLeft"></div>
<div id="headerCenter"></div>
<div id="headerRight"></div>
</div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer">
<div id="footerLeft"></div>
<div id="footerCenter"></div>
<div id="footerRight"></div>
</div>
</div>
</form>
</body>
</html>
Any ideas anyone?
Auto is already the default value.
Block level elements don't stretch to fill the parent's height.
So, that div is not supposed to stretch - is it? (Maybe see height calculation for block level elements )
Which would mean is is obeying the height:auto attribute.
Maybe you can do what you want using position: absolute; bottom: 10px; on the footer and some bottom-margin on the content.
Background might be tricky - maybe you can give "pink" background to all body, and white to the header and menu.