I have a table based layout which is 100% height/width with no scrollbars. The header (red) automatically expands to fit the content and I don't know how many pixels it will be. The fluid table below gives exactly what I what.
<html>
<body height=100%>
<table height=100% width=100% padding=0>
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr>
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top>
<div style="height:100%; width:100%; overflow:auto;">
This area can have content that overflows - needs an independent scrollbar.<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>
</div>
</td></tr>
</table>
</body>
</html>
How can I do the same layout in CSS and have it work on commonly used browsers?
The header shouldn't be too difficult, for the two columns, I think you'll need to use faux columns to make the colours stretch all the way to the bottom.
For the header I think you'll just want:
HTML:
<div id="header">Fit<br/>to<br/>content<br/>height</div>
CSS:
#header {
background-color: red;
width: 100%;
}
p.s. You just made my eyes bleed ;)
<html>
<head>
<style type="text/css">
#wrapper
{
height: 100%;
width: 100%;
padding: 0;
}
#header
{
float: left;
width: 100%;
background-color: red;
}
#main
{
height: 100%;
width: 100%;
float: left;
}
#main-left
{
height: 100%;
float: left;
width: 66%;
background-color: blue;
}
#main-right
{
height: 100%;
float: left;
width: 34%;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Fit<br />to<br />content<br />height
</div>
<div id="main">
<div id="main-left">
How can I do this with CSS?
</div>
<div id="main-right">
Tested in Chrome 2 and IE8
</div>
</div>
</div>
</body>
</html>
Related
I'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
This is what I want to achieve:
Footer should stay at the bottom of the screen even if the content doesn't fill the viewport vertically.
Content columns have a border that should always be 100% content height. As the number and width of columns will change from page to page, background-image to fake column borders can’t be used.
There should be no scrollbars when all content is visible (Example 1).
Solution should be all HTML/CSS, no JS.
Minimum browser support should be IE9+ and latest desktop versions of Firefox, Chrome, Safari, Opera; with no quirks mode.
Width of the header/footer/content is always fixed (so header and footer don’t need to be placed inside content area). Height of header and footer is also fixed.
I’ve tried techniques from Fluid Width Equal Height Columns and this sticky footer example but haven’t been able to satisfy all the requirements at the same time. Any tips are appreciated.
Edit: So far the farthest I’ve got is by imitating tables which works correctly in webkit browsers but not in IE9 and Opera. See the fiddle here.
HTML:
<div class="table outer">
<div class="row header">
<div class="cell">header</div>
</div>
<div class="row content">
<div class="cell">
<div class="table inner">
<div class="row">
<div class="cell">content 1</div>
<div class="cell">content 2</div>
<div class="cell">content 3</div>
</div>
</div>
</div>
</div>
<div class="row footer">
<div class="cell">footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.table {
display: table;
min-height: 100%;
height: 100%;
}
.table.outer {
width: 500px;
margin: 0 auto;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.header, .footer {
height: 25px;
background-color: #999;
}
.content {
background-color: #eee;
}
.table.inner {
width: 100%;
min-height: 100%;
height: 100%;
}
.table.inner .cell {
width: 33%;
border-right: 1px dashed #c00;
}
While not a semantically desirable solution, the only way I could find to achieve all stated requirements is to go back to the 90s and use tables for layout.
See the fiddle here.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table class="outer">
<tr>
<td class="header" colspan="3">header</td>
</tr>
<tr class="content">
<td>content1</td>
<td>content2</td>
<td>content3</td>
</tr>
<tr>
<td class="footer" colspan="3">footer</td>
</tr>
</table>
</body>
</html>
CSS:
html, body {
height: 100%; margin: 0;
}
.outer {
min-height: 100%;
height: 100%;
width: 500px;
margin: 0 auto;
}
.header, .footer {
height: 25px; background-color: #999;
}
.content td {
width: 33%;
background-color: #eee;
border-right: 1px dashed #c00;
vertical-align: top;
}
Try this :
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
In case anyone is interested, I figured out a solution that uses jQuery (instead of tables).
http://benpearson.com.au/web-development/3-column-fluid-layout-with-header-sticky-footer-and-100-percent-height-columns/
I cannot figure this one out.
When using display:table along with display:table-cell, placing an img tag in either cell1 or cell2 will force the content (the "This is a test" content for example), in the other cell to drop below the image. Is this correct? It does this across all browsers so I'm thinking this is correct, but why?
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 2px solid #000;
width: 100%;
height: 100%;
}
.table {
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 50%;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div id="cell1" class="cell">
<h1>This is a test</h1>
</div>
<div id="cell2" class="cell">
<img src="" />
</div>
</div>
</div>
</body>
</html>
Hm. vertical-align: top in the table-cell.
Workin example: at jsFiddle
This is because inserting an image into the div, takes your layout out of the natural flow of the layout.
I would suggest just using tables, or if not the case use float, and create it that way.
set style="verticle-align:top" for your "cell" divs
I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:
<html>
<head>
<style>
* { border: 1px solid black;}
#contentWrapper { width:450px; }
#leftColumn { width:100px; float: left; }
#leftColumnTop { width:100px; height:50px;
background-color: gray; }
#leftColumnMiddle { background-color: red; }
#leftColumnBottom { width: 100px; height:50px;
background-color: gray; }
#content { width: 300px; float: left; }
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br> here <br>more
<br>more <br>more <br>more <br>more
<br>more <br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.
This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper { position: relative; float:left; width: 450px; }
#leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content { width: 300px; float: left; margin-left: 100px;}
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
</div>
<div id="footer">footer text</div>
</body>
</html>
And to the commenter - it nearly worked, so that's why. ;)
try min-height for the one that needs to grow
If you need both columns to be of equal height, and work in IE6, you basically have to hack.
A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).
This solution is outlined here.
Quoting from the page I linked:
The basic method works like this:
Blocks which will act as columns must be wrapped in a container element
Apply overflow: hidden to the container element
Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks