Solved

CSS Layout Challenges

Posted on 2011-03-18
4
222 Views
Last Modified: 2012-05-11
I'm trying to build what I hoped would be a pretty straightforward CSS layout.

Inside the body I want a header that is always at the top.

I want a menu on the left.  If the number of entries (<li> items) in the menu area grows long, I want it to overflow vertically so the user can scroll just the menu area.  The menu width can be fixed, but the height of the viewing area may change and so I want it to "stretch" 100% tall.

The main content area is a larger area on the right side of the screen.  I want the content to fill this area horizontally.  This area cannot have a fixed width, it needs to grow and shrink as the browser is resized.  It should also be 100% height and overflow as needed.

I did a little sketch of what I'm trying to do.  The "pane" marker is a bit misleading now I see, but the bottom area is a div with id "pane" that encapsulates the menu and content divs and lives under the header div.

My current markup is simple as is the CSS and it's also completely fubared so I am not posting it at this time to avoid muddying the waters.  I'm clearly screwing something up so I'd rather just get expert input on how to do this right rather than critique on how I'm doing it now :)

Thanks for any help!

P.S.  I really am interested to know if this can be done purely with CSS.  No Javascript. My sketch of the layout
0
Comment
Question by:trippy1976
  • 3
4 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
Comment Utility
try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		html, body, #container
		{
			height:100%;
			width:100%;
		}

		#header
		{
			height:25%;
			width:100%;
			background-color:pink;
		}

		#pane
		{
			height:75%;
			width:100%;
		}

		#menu
		{
			height:100%;
			width:25%;
			display:inline;
			background-color:blue;
		}

		#content
		{
			height:100%;
			width:75%;
			display:inline;
			background-color:yellow;
		}
	</style>
</HEAD>

<BODY>
	<div id="container">
		<div id="header">
		</div>
		<div id="pane">
			<div id="menu"></div>

			<div id="content"></div>
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
 
LVL 4

Author Comment

by:trippy1976
Comment Utility

Tried this (thanks btw) and the following is my view in FireFox:
 Proposed view rendering
Puzzling as the colors you specify for the divs show up only in the header.  The rest do not colorize.  Unsure why.  But, this is not exactly what I am looking for.  I took out the display: inline directives and the colors appeared correctly after that.  I put them back for clarity and am posting a code snip which is what you posted before with filler content so you can easily see if it's doing what is expected.

I'm attaching a screenshot of my own attempt (where I left off before posting here).  It's convoluted by a lot of styles in the CSS which is an issue and why I'm trying to go back to square one here.  It illustrates what I was shooting at.

Basically I want to never use the browser scroll - only overflow scrolls in the menu or content divs respectively.

My first try
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		html, body, #container
		{
			height:100%;
			width:100%;
		}

		#header
		{
			height:25%;
			width:100%;
			background: #FF0000;
		}

		#pane
		{
			height:75%;
			width:100%;
		}

		#menu
		{
			height:100%;
			width:25%;
			display:inline;
			background: #00FF00;
		}

		#content
		{
			height:100%;
			width:75%;
			display:inline;
			background: #0000FF;
		}
	</style>
</HEAD>

<BODY>
	<div id="container">
		<div id="header">
		</div>
		<div id="pane">
			<div id="menu">
				<ol>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
				</ol>
			</div>

			<div id="content">
				Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,
				Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,
				Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,
				Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,
			</div>
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
 
LVL 4

Author Comment

by:trippy1976
Comment Utility
Here is a version that works as I originally envisioned... in Firefox.  But not in IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		html, body
		{
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
		
		#container {
			height: auto;
			width: auto;
		}

		#pane {
			top: 100px;
			bottom: 0;
			left: 0;
			right: 0;	
			width: 100%;
			height: auto;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
			background: #0000FF;
			position: absolute;
		}

		#header {
			background: green;
			height: 100px;
		}
		
		#content
		{
			height:100%;
			width:75%;
			float: right;
			background: #0000FF;
			padding: 0px;
			margin: 0px;
			overflow: scroll;
		}
		#menu
		{
			height:100%;
			width:25%;
			float: left;
			background: #FF0000;
			padding: 0px;
			margin: 0px;
			overflow: scroll;
		}
	</style>
</HEAD>

<BODY>
	<div id="container">
		<div id="header">
		
		</div>
		<div id="pane">
			<div id="menu">
				<ol>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
					<li>OPTION</li>
				</ol>
			</div>				
			<div id="content">
				<ul>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				<li>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,</li>
				</ul>
			</div>
		</div>
	</div>
</BODY>
</HTML>

Open in new window

0
 
LVL 4

Author Closing Comment

by:trippy1976
Comment Utility
This was a good start, I ultimately had to play around a lot more to get things to do what I want and even then - it's not perfect.  I'm unsure if you can do what I really want.

It ended up working in FF and Chrome but not IE but for my current purposes that's sufficient.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now