Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

CSS Layout Challenges

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
trippy1976
Asked:
trippy1976
  • 3
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
trippy1976Author Commented:

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
 
trippy1976Author Commented:
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
 
trippy1976Author Commented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now