9 replies [Last post]
Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

My site, follows this structure.
http://css-tricks.com/examples/PerfectFluidWidthLayout/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>The Perfect Fluid Width Layout</title>
 
	<link rel="stylesheet" type="text/css" href="style.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
</head>
 
<body> 
 
    <div id="demo-top-bar">
 
  <div id="demo-bar-inside">
 
    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>
 
    <div id="demo-bar-buttons">
                <a class="header-button" href="http://css-tricks.com">Back Home</a>
          <a class="header-button" href="http://css-tricks.com/downloads/">More Demos</a>
          </div>
 
    <div id="demo-bar-ad">
      <div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>
      <a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
    </div>
 
  </div>
 
</div>
	<div id="page-wrap">
		<div id="inside">
 
			<div id="header">
				<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
			</div>
 
			<div id="left-sidebar">
				<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>
 
			</div>
 
			<div id="main-content">
 
				<h2>Why is this layout "perfect"?</h2>
				<ul>
					<li>Works in all major browsers</li>
					<li><strong>Shrinks</strong> to 780px<br />This accomodates users with 800x600 resolution, with no horizontal scroll!</li>
					<li><strong>Grows</strong> to 1260px<br />This accomodates users with 1280x768 resolution and everything in between.</li>
					<li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
					<li>The left sidebar is of "equal height" to the main content</li>
				</ul>
 
				<br /><br />
 
				<p>
				Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
				</p>
 
				<p>
				Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
				</p>
 
				<p>
				In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
				</p>
 
				<p>
				Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
				</p>
 
				<p>
				Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
				</p>
 
			</div>
 
			<div style="clear: both;"></div>
 
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
 
		</div>
 
		<div style="clear: both;"></div>
 
	</div>
 
 
</body>
 
</html>

* {
	margin: 0;
	padding: 0;
}
 
body {
	font-size: 62.5%;
	background: url(images/stripe.png) repeat;
}
 
p, li {
	font: 1.2em/1.8em Tahoma, sans-serif;
	margin-bottom: 10px;
}
 
h1 {
	font: 2.0em Tahoma, sans-serif;
	color: white;
	height: 0px;
}
 
h2 {
	font: 1.8em Tahoma, sans-serif;
	color: green;
	margin-bottom: 10px;
}
 
ul {
	margin-left: 25px;
}
 
img {
	border: none;
}
 
#page-wrap {
	background: white;
	min-width: 780px;
	max-width: 1260px;
	margin: 10px auto;
	}
	#page-wrap #inside {
		margin: 10px 10px 0px 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
 
#main-content {
	background: url(images/left-sidebar.gif) repeat-y white;
	padding-left: 230px;
	padding-top: 20px;
}
 
#header {
	background: #267f23;
	text-align: center;
}
 
#left-sidebar {
	width: 150px;
	float: left;
	padding-left: 15px;
	padding-top: 20px;
}
 
#footer {
	background: #267f23;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
}

but i cant figure out how to make the footer hit the bottom of page with less contet then max height. without messing something up and get the scrollbar.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Already answered

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

sorry my mistake, i also

sorry my mistake, i also want/need the content to go all the way down. so that when footer is at bottom, the content field will follow. even with less text.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

How?

How is the content to go to the bottom if there isn't enough? Do you want the content to be at the bottom and rise with increasing amounts? I've seen this discussed, but remember that the only solutions required fixed size, were easily broken, and did not play nicely with the other children. Frankly, I cannot imagine a reasonable use case.

On second thought, newer browsers (I'm looking at you, IE) have better support for the display property, so the above scenario may be possible, if still not sensible.

You will need to supply your specimen content and markup, along with 27 8 by 10 color glossy photographs with circles and arrows on the front and a paragraph on the back explaining …. If you're not familiar with Arlo Guthrie, never mind about the pics. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

oh i c. and no i have no clue

oh i c. and no i have no clue about Arlo Guthrie.

Well this is how i wanted it to be.

body Background (a specific image that repeats)
header 100% width, and lets say 100px high. background repeat x
content, well either 800px width or 1000px width. (depending on the users screen). min-height max-height.
footer, 100%width, 100px high. background repeat x.

if i did'nt want the header to be 100% width, but like the content, then it all would be no problem for me. but with the specific headerheight im getting problems.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Looking at my example, For

Looking at my example,

  • For #main, delete width, max and min widths, and margin.
  • Your header comes next in the html.
  • After closing the header (where #globalnav begins in the ex.), add new element <div id="inner-wrap">.
  • Style
    #inner-wrap {
      max-width: 1000px;
      min-width: 760px;
      }
  • Close the #inner-wrap element immediately before the #main closing.

That ought to do it.

cheers,

gary

p.s. Meet Arlo here.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Super_Duper_Man
Super_Duper_Man's picture
Offline
Regular
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-04-02
Posts: 19
Points: 31

Just a few more questions

Just a few more questions from my part.

- If you look at the image (firefox output), i cant manage to hit top (with header) with none of the padding/top abilities.
- Why i want the inner-wrap to go all the way down to footer? Because the background will be something like: and i want to keep the look on the left and right side of the content/inner-wrap. and keep a white background on the content. but of course my main priority is to make it look the same on IE/FF/Oprera/Chrome.

- Also on the footer your using
width: 85%;
min-width: 760px;
max-width: 984px;
is the 85% there incase the min-width max-width is not supportet by older browsers?

Current code/look

<html lang="no">
<head>
<title>Tittel</title>
<style>
html, body, #container {
    min-height: 100%; 
    width: 100%;
    height: 100%; 
    margin: 0;
    padding: 0;
}
body{
    background:pink;
}
 
html>body #container {
    height: auto; 
 
}
 
#container {
    position: absolute;
    left: 0;
    background:white;
}
 
#main {
    height: auto;
    padding-bottom: 3em;  
    background: yellow;
 
}
 
#header, #inner-wrap{
    margin: 0 auto;
}
 
#header{
    background:green;
    height: 100px;
    width: 100%;
}
 
#inner-wrap {
    max-width: 1000px;
    min-width: 760px;
    background:purple;
}
 
#footerwrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: blue;
}
 
#footer {
    width: 85%;
    min-width: 760px;
    max-width: 984px;
    margin: 0 auto;
    background: red;
}
</style>
</head>
 
<body>
 
<div id="container">
    <div id="main">
        <div id="header">
            <h1>Website-header</h1>
        </div><!-- end banner -->
        <div id="inner-wrap">.
            <h2>Page</h2>
            <p>Please note that this type of thing is a holdover from graphic design for print, and is not really appropriate for use on the web.</p>
        </div>
    </div><!-- end main -->
 
    <div id="footerwrap"> <!-- put your footer stuff here -->
        <div id="footer">
            <p>Footer</p>
        </div> <!-- end footer -->
    </div><!-- end footerwrap -->
</div>
 
</body>
</html>

Thanks, a lot for all the help! You really deserved the moderator-title.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The width in #footer is to

The width in #footer is to limit its width and center it to match the content area. You could remove that tag, and let the footer stuff live in the #footerwrap container, or simply remove the width values from #footer.

By wanting the header and footer to go the width of the viewport while content has restricted width, you've made things difficult. I'm going to point you toward what may be a solution. See §8. Functional Notations. This module is CR status, which means it is pretty well stable. Older browsers may be a problem. Hell, new browsers may be a problem. I haven't played with this, so don't know all the ins and outs; it looks simple enough.

Take the header out of #container and move it to before that element. Now use calc() to figure out an appropriate min-height for #container by subtracting the header and footer heights from 100%. Then the background of #container will reach the bottom. Maybe;)

From both a design point of view and from an implementation view, I will restate that you really should drop the stuck at the bottom footer idea. It just doesn't belong on a web page. Consider: if you don't have a page's worth of content, do you really need that page? If you really do need such a small page, why not box it and hang it centered on the page?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guess as someone has selected

Guess as someone has selected /checked 'best reply' this is resolved Smile
So I'm going to shamelessly hijack it.

This new property passed me by!

So another of the trials and bloody tribulations we have had to deal with over the years is laid to rest suddenly!! makes me flipping furious really.

First we add the border-box to make it all bloody simple for the new breed of developer that can't be arsed to study and understand the language to grasp how to work with the box model; now we add the calc so that people can do the old 100%? why can't I have 100% plus 10px what wrong with that.

CSS I find you now lacking in frigging credibility, you have pissed around for too many years doing bugger all these properties have been shouted about as long as I can remember but should we have them or is all that's going on now simply giving licence to the print brigade, the graphics crew who insists this is their world and MUST conform to their bloody paradigms Angry

Oh well makes life easier I guess, we might as well think of web development as an extension of the print industry anf pages just as magazine articles or newspaper pages.

OP sorry to hijack your thread but my rant is not aimed at anyone, well possibly the WG & vendors running things Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There ya go again

You must be getting cabin fever, locked in as you are by ten foot snow drifts. I know how you feel, having had to take a jacket with me when I go out. The heat's off now, the windows are open, and temps are in the 75-80℉ range; too hot to roll out croissant dough. Dang! Guess I could start the A/C.

The thing is,

Quote:

[…] my rant is not aimed at anyone, well possibly the WG & vendors running things.

you're forgetting that the specs are not for us poor grunts in the trenches trying to write web pages. It is strictly for the vendors, spelling out how they are supposed to deal with the stuff. We're just along for the ride; dragged behind the bus.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.