I'm trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div's are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.
Could someone point me in the right direction how to tackle this with proper CSS? For now I'm not yet interested in a javascript solution. As CSS doesn't provide a clean answer, a javascript solution comes eminent!
This is how far I came:
<div id='header'>Header</div>
<div id='content'>
<div id='innerContent'>
This is the fluid part
</div>
</div>
<div id='footer'>footer</div>
css:
#header {
position:absolute;
top:0px;
left:0px;
height:100px;
z-index:5;
}
#content {
position:absolute;
top:0px;
left:0px;
height:100%;
z-index:2;
}
#innerContent {
margin-top:100px;
height:100%;
}
#footer {
height:400px;
}
EDIT:
I'm sorry, I feel embarassed. I made something similar about a year ago, but at first I didn't think it was possible to adjust it to this situation. Apparently it was.
As I think other's have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it's position when the content div gets larger. Since the footer is absolutely positioned it won't follow the content div's flow, which makes it stay at the same place even though the content expands.
The trick is to wrap everything in an absolutely positioned div. It will expand if it's content gets larger, and the footer div will be positioned according to the wrapper's borders instead of the document's borders.
Here's the code. Try to put a bunch of <br /> tags within the content div and you'll see that everything adjusts.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
min-width: 100%;
position: absolute;
}
#header {
height: 100px;
background-color: red;
}
#content {
background-color: gray;
margin-bottom: 50px;
}
#footer {
height: 400px;
min-width: 100%;
position: absolute;
bottom: 0px;
margin-bottom: -350px;
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
ORIGINAL:
Sadly, css lacks a clean way to do this. You don't know the viewport height (which you called h) and therefore can't calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.
The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
http://browsersize.googlelabs.com/
I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: red;
}
#content {
min-height: 470px;
background-color: gray;
}
#footer {
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div id='header'>Header</div>
<div id='content'>
Content
</div>
<div id='footer'>footer</div>
</body>
</html>
If I understand your problem correctly I think this might lead you into the right direction.
http://jsfiddle.net/mikevoermans/r6Saq/1/
I'll take a poke at it. Not sure if I read your screenshot correctly but I set the content div to be 50-100px in height.
Here is my jsfiddle: http://jsfiddle.net/AX5Bh/
I am using the min-height and max-height CSS attributes to control the #innerContent div.
If you horizontally expand the result window you will see that some of the text is highlighted . I have set the content to be hidden if it is larger than the #innerContent div. You might want something different. I only highlighted the text with an <em> tag to demonstrate that max-height was working.
If you remove all the text but the first sentence you will see it is 50px in height.
Here is a link to browser support of min-height and max-height: http://caniuse.com/#search=max-height
Related
Everyone this is my first post, so I hope I did it right.
I am facing a problem where I have child divs that need to be the same width. The #content can be bigger than the browser window (hence the 3000px, but won't always be bigger than the browser window). Currently #content is shown properly and I can use the scrollbar to see the entire #content, but #messages and #menu are cut off at the width of the browser window.
I have tried using width: inherit and several other options, but they didn't work. Does anyone else have a working solution?
I have created a JSFiddle to make life easier http://jsfiddle.net/Ks665/
I have added a screenshot of the probleem:
The red and green must become as long as the blue div.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</body>
<html>
CSS:
#import url('reset.css');
body {
min-width: 990px;
}
#messages {
height: 100px;
background-color: red;
}
#menu {
height: 100px;
background-color: green;
}
#content {
background-color: blue;
height: 250px;
width: 3000px;
}
You could try wrapping them inside another DIV, and specify the width on there; the child DIVs will automatically fill to the width of the parent:
<div id="container">
<div id="messages">test</div>
<div id="menu">test</div>
<div id="content">test</div>
</div>
And then apply the width to the container DIV instead of to 'content':
#container {
width: 3000px;
}
The reason it isn't working in your example is because the DIVs are children of the body tag, which has a minimum width specified, but nothing explicitly defined like I've shown above.
I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code
<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
</div>
Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body { height: 100%;}
footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5);
position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it
I would recommend;
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.
#main { padding-bottom: 150px; } /* must be same height as the footer */
I would like to build a fluid layout and would like to achieve something like
width:100%-200px;
i.e. have a div with content, call it div id="content" with a fixed margin on either side. I have tried to use the trick of putting the div id="content" into another div container with a margin, but I don't know how to fill out the background of div id="content". Is there a way of telling the div id="content" to use 100% of the available space as background, such that the width of the content plus the width of the margin does not exceed 100% of the browser window size?
Having the DIV set to be 100% with a margin of XXX on either side won't work as that will exceed the size of the browser window.
You could try the following:
body {
padding:0 2%;
}
#content {
width:96%;
}
http://jsfiddle.net/YYhvT/
Use position absolute...
#content {
position: absolute;
left: 0;
right: 200px;
}
See my Fiddle.
PS Advantage is that you don't need values on other elements.
You can put a container around the content and give it 200px left/right padding. This should do the trick (at least, from what I understand of what you are trying to accomplish). Also see this code example:
<!doctype html>
<html>
<head>
<style type="text/css">
body { margin: 0 50px; }
#container { padding: 0 200px; background: #FF0000; }
#content { width: 100%; background: #00FF00; }
</style>
</head>
<body>
<div id="container">
<div id="content">
Here goes my content
</div>
</div>
</body>
</html>
Note that the body margin is just for illustrating purposes, to let you see the background differences.
(I would post a jsFiddle, however I am not able to use it since I can only use IE7 at this point.)
here is my solution,
html:
<div id="content" class="content">
My Content
</div>
css:
.content {
position: absolute;
right: 100px;
left: 100px;
background-color:#A5112C;
}
and link to it: http://jsfiddle.net/MPYHs/
also if you want to put sort of image as a background I suggest you use small pattern like https://ssl.gstatic.com/android/market_images/web/background_stripes.gif
hope it helps,
regards
In my website, I have a footer that has a height of 100px and the css for the footer looks something like the following:
.footnote {
width: 95%;
height: 100px;
position: fixed;
background: url('../images/coolfooter.png') bottom center;
bottom: 40px;
left: 30px;
}
The problem is if I have too much content on my web page, the content starts overlapping with the footer.
I want to restrict the content to only appear above the footer always somehow, so that no content gets overlapped with footer.
How can this be done?
Have you tried z-index? As others have said it's a bit hard to say without looking at the html. I'm not 100% sure what you're asking for.
You basically need to make sure that either the content has a bottom margin greater than or equal to the height of the footer, or (if the content is in a container of some sort) that it's container has a bottom padding equal to or greater than the height of the footer.
Here's a fairly popular reference site for doing this so-called "sticky footer": http://www.cssstickyfooter.com/
Adding overflow:auto to div.content should be sufficient.
<html>
<head>
<style type="text/css">
div.header
{
top:0px;
height:100px;
max-height:120px;
min-height:100px;
}
div.content
{
height:600px;
max-height:750px;
overflow:auto;
}
div.footer
{
height:100px;
max-height:120px;
min-height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
I am making a website thats 960px wide but I want images on both sides of the header that you can see if you have a bigger screen.
because I want to keep the site 960px wide I need these extra side images to not be counted by the browser, I can get it to work on the left
see here:
http://www.wireframebox.com/test/sideimages/index_leftworks.html
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
if you make your window thinner the left red image disappears off the site without causing the browser window to get a bottom scroll bar, however when I try and do the same thing to the right side it doesn't work
see here
http://www.wireframebox.com/test/sideimages/
Code is equal, only <div id="right"></div> is missing
the css is in the source.
you can also see it being used on this site to show the date sticking out the left of the page, without impacting the overall sites width
http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/
why does this work on the left but not the right?
See the below fiddle for output...
Fiddle: http://jsfiddle.net/C2j6G/4/
Demo: http://jsfiddle.net/C2j6G/4/embedded/result/
see below image -
It's better if you can combine those two images & give in the background of body. like this:
HTML
<div id="main"></div>
CSS
body {
margin: 0;
padding: 0;
background:#096 url(http://imgur.com/JHXDv.png) no-repeat top center;
}
#main {
width:960px;
height:216px;
background-image:url(http://www.wireframebox.com/test/sideimages/main.jpg);
margin:0 auto;
}
Check this http://jsfiddle.net/PVWzA/1/
If you want your website page to be 960px wide, then you should change your width of the main image to 960 - 170(left) - 170(right). Changing the width of main.jpg to 620px should fix your issue.
HTH
Put the image in a div or image tag that is larger than your center div and make it the child of the center content div. Also make sure that it's positioning will take it out of the flow(\absolute). If you then add a negative margin you can pull the image outside of the content div without disrupting its placement.
#center div.top{
width:1200px;
height:170px;
margin: 0px -170px;
position:absolute;
background:url("randombackground.png") no-repeat;
}
The html will be kinda like this:
<div id="center">
<div class="top"></div>
Content content content
</div>