Solved

CSS Layout Challenges

Posted on 2011-03-18
4
223 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
ID: 35167007
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
ID: 35167670

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
ID: 35168183
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
ID: 35309511
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

911 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

17 Experts available now in Live!

Get 1:1 Help Now