Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Layout Challenges

Posted on 2011-03-18
4
Medium Priority
?
231 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:
Gurvinder Pal Singh earned 1500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

722 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