Solved

CSS layout for header, footer, 2-column body w/ nested content

Posted on 2006-06-18
5
892 Views
Last Modified: 2007-12-19
I am having issues in producing a layout using CSS only.  I would be grateful if one of the many CSS gurus in the community would help point me in the direction for creating a stylesheet that accomplishes my goal and remain cross-browser compatible.  Convention would suggest I post the code developed to this point.  But to be honest, I have found I do not have a clue as to what I am doing.  Further, in the process of synthesizing others code that achieves some of what I need to accomplish, my lack of skill has created a product that is a discordant and disparate mess of otherwise good code.  As such, please accept my humble apologies for not posting what I have created thus far.
 
The Goal:  Create a fixed header and footer that span the entire width of the top and bottom of the viewport, respectively.  In the remaining area would be two surrounds:  one for navigation and one for content.  The nav container would be 175px wide and 100% the remaining height; while the content container would occupy the remaining area.  Within the nav container would be a nested div that has a margin of 3px, a 1px black border and occupy 100% width and height of the nav container; any overflow would be hidden.  Within the content container would be a nested div that has a margin of 3px, a 1px black border, and occupy 100% width and at minimum 100% height of the content container.  Any overflow would spawn a vertical scrollbar over the content container.  

In the event my description was not clear, a GIF of the layout is available at http://www.propagranda.com/images/website_layout.gif.  Thank you in advance for the help.
0
Comment
Question by:pigouvian
  • 3
  • 2
5 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16932729
0
 

Author Comment

by:pigouvian
ID: 16935896
Thanks GrandSchtroumpf for your reply.  I have gotten to this point, but am unable to get the DIVs that are nested in the nav and content surrounds that will contain the content to expand 100% width and height (less 3px margin).  Any thoughts?
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16937789
> but am unable to get the DIVs that are nested in the nav and content surrounds that will contain the content to expand 100% width and height (less 3px margin).
That's perfectly normal that you are unable to do it.
You can try something with min-height, but i have no idea how you'll be able to have mixed units (percentage minus pixels)...  And good luck if you need that to work in IE.
Another solution is to use javascript to resize your elements (or use an expression in IE).
But the best solution is to you adapt your layout to something that does not go against the fundamental principles of the CSS layout.
0
 

Author Comment

by:pigouvian
ID: 16938301
Just to make sure I understand correctly, it is not possible to nest one DIV in another DIV, set the margin of the inner DIV to 3px, and have it fill the area of the outer DIV?  You are right that I probably don't understand the principles of CSS -- so I have a related question.  Are the parameters I set for the inner DIV relative to the dimensions of the outer DIV?
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 500 total points
ID: 16940763
Exactly, it's not possible to have a block-level element "fill" the vertical available space.  All you can do is specify the height to be a percentage of the height of its direct parent...  But that won't give you a 3px margin.  Also, percentage heights only work when the parent's height is specified explicitely, otherwise it's interpreted as "auto".

When your CSS gets too complicated, it's usually because you don't do things the way they were intended to be done.
The idea about CSS layout is that it's the content that creates the structure.  That's completely the opposite of designing a "template" using tables, and then filling your template with content.

If you are starting with CSS, i suggest you start with a simple layout that respects the philosophy of CSS layout (my CSS-frameset is not a good example).  It's better not to specify any explicit heights.  And remember that if you do specify explicit heights, then you should also specify "overflow: auto".  Using "min-height" is fine, but not supported by IE6.

Start by coding your html with semantics in mind.  When your html is completely coded, then you can experiment with CSS and see what you can make out of it.  It's much better to do it this way.  Make the best use of what CSS has to offer and don't focus on what it cannot do.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Make Line Items Look Good Over Mobile 2 83
Border and image sizing 5 30
Help to align the buttons in a row 2 43
flex div overflows its container 4 28
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question