CSS - Layout Using Full Available Space With One Scrollable Area For Content : How ?

This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left.

A summary of my layout right now is:
<div id="wrapper">
<div id="container">
<div id="content">
</div>
</div>
<div id="navigation"
<div id="navlist">
</div>
</div>
<div id="clearing">
</div>
</div>

my css:
#container {
float: right;
margin-left: -16.8em;
width: 100%;
background-color: #2586d7;
}
#navigation {
float: left;
width: 14em;
background: #90bade url(navimage.jpg) repeat-y: right;
}
#wrapper {
background: #90bade url(navimage.jpg) repeat-y: right;
}
#navlist is a div containing a styled ul for navigation.
#clearing {
clear: both;
height: 0;
}

So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code.

Thanks for any help!

I am looking for some examples on making this layout:

----------HEADER----------
nav content
- -
- -
- -
-
-
-
-
-
-
----------FOOTER0---------

The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers?

I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense?

Any help would be greatly appreciated, thanks

I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much
text was entered, just similar to the html code that fixes the area of the table.

i.e.

Code:

<table style="table-layout: fixed;">

This code lets the table stay in a fixed size no matter how much text is entered...

is there a way to have a different background image in the .content area on different pages?

this is the site:
http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html

cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages?

Here's the url

Template

Any comments on the code will be very helpfull. Even if it is out of topic.

In IE it looks pretty good. In firefox the border goes under the large image and the image navigation is left there naked on the body background.

i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area).

how is it possible

wating for ur reply

bye

Hi,

Can anyone recommend how best to how to dynamically constrain amount of Text/Content in a DIV area that can vary in size??

That is, say you have:
(a) a content (DIV) area on your view that can expand/contract depending upon browser size ( i.e. when someone is re-sizing the browser window) and
(b) dynamic text/content that is to be displayed, based upon user input - e.g. image a defined area/size for several user comments for example. Users can create their own comments, but you only want them to be able to take up a given amount of screen resource, and then perhaps have a "...more" link at the bottom if they go over.

How can I best setup this up? e.g.
(1) How to setup the layout/CSS so that if more text / content is present in the DIV area that can be displayed that the DIV area doesn't expand due to the extra content the user put forward, and/or
(2) Do I need to also complete this by programming what content comes out? E.g. in Ruby on Rails say then the question would be how to calculate how much text/content can fit in the current size of the DIV (noting browser re-sizing) so that you get the chance to put the "...more" link at the bottom? Hopefully this approach isn't required.

Any other suggestions welcome that address what I'm trying to do are welcome, which is really offering a area for display of user feedback where each piece of feedback has a maximum area it can take on the main screen only, and also that browser re-sizing is possible.

Tks
Greg

I created what I thought was a simple layout using css, but I have some odd space above my layout in Firefox that I can't get rid of. The background peeks through above the text at the top so it's easy to see:

http://sundaysermons.heikou.net/brickaday/

As you can see, the layout should be flush against the top of the browser. I renders correctly in IE but not in Firefox. I checked my code and both the html and css validate so I'm assuming there's something wrong with my css:

Code:

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Verdana, sans-serif;
	font-size:12px;
	color: #000000;
	background: #FFFFFF url(images/bg.gif) repeat-y left;

}

#heading {
	height: 44px;
}

#heading h1 {
	font: bold 18px "Trebuchet MS", Tahoma, Arial, "Microsoft Sans Serif";
	color: #E77F04;
	text-align: left;
}

#banner {
	height: 73px;
	background-color: #E29722;
	border-top: 1px solid #9D3E1F;
	border-bottom: 1px solid #9D3E1F;
}

#tagline{
	height: 17px;
	background-color: #F0DCA2;
	border-bottom: 1px solid #9D3E1F;
}

#leftcontent{
	width: 210px;
	background-color: #FCF1D0;
	padding-top: 20px;
}

#leftcontent ul {
	margin-left:0;
	padding-left:0;
	display:inline;
}
#leftcontent ul li {
	margin-left: 0;
	list-style: none;
	padding-left:10px;
	line-height:26px;
}

#rightcontent{
	width: 470px;
	float:left;
}

Any help you guys could give me would be greatly appreciated. Thanks.

http://www.ilumos.co.uk/site/
http://www.ilumos.co.uk/site/styleDefault.css

Ok, I'm trying to make a page layout for my site, and on the left I have a navigation bar (#sidebar), which I'd like to fill the whitespace between it and the footer (#footer) (but not dissapear behind the footer, height: 100%). I'd also like to fill the whitespace between the left of the main (#main) div and the edge of the page, and the whitespace under the div too.

If there's a non-hacky solution to this I'd love to hear it, but if there isnt, and there's a way to change my CSS/HTML to get the same result I'd still be interested.

Thanks loads,

ilumos

Hello

Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height
the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between.

If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length

In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit

Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11
I would like the end result to work in the above browsers as well as IE7 if possible
I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later
Code:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Three Columns</title>
		<style type="text/css">
			*, html, body {
				margin: 0;
				padding: 0;
				font-size: 100%;
			}
			html, body {
				width: 100%;
				height: 100%;
			}
			#maincontainer {
				position: relative;
				height: 100%;
				background: #eee;

			}
			#left {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				background: #fbb;
				height: 100%;
			}
			#mid {
				position: relative;
				margin: 0 200px 0 200px;
				background: #efe;
				height: 100%;
			}
			#right {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				background: #bbf;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="maincontainer">
			<div id="left">
				left start<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left end<br />
			</div>
			<div id="mid">
				mid start<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid end<br />
			</div>
			<div id="right">
				right start<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right end<br />
			</div>
		</div>
	</body>
</html>

In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column

What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed

I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter

Thanks in advance

I have a 3 column layout which is working fine so far except for one thing: the content in the 3rd column is pushed down, and starts at the horizontal level where the content in the center column finishes.

How do I prevent that from happening, and make the 3rd column content start at the top like the other 2 columns?

This is the CSS:

Code:

/*container div*/
#container {
	width: 770px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0; margin-top: 0;
	padding: 0px;
	text-align: left;
	font-size: 11px;
}

#contentleft {
        width: 180px;
        background: #fff;
        float: left;
        margin: 0;
        border-left: 1px solid #000; border-right: 1px solid #000;
}

#contentcenter {
	width: 454px;
	padding: 0px;
	float: left;
	margin: 0;

}

#contentright {
	width: 136px;
	padding: 0px;
	float: right;
	margin: 0;
	border-left: 1px solid #000; border-right: 1px solid #000;
}