Solved

CSS Layout Challenges

Posted on 2011-03-18
4
226 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

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