Looking for a layout not listed

**scrupul0us** · 04-15-2008, 11:40 PM

I need a layout such that:

1) the header is 38px high, 100% across

2) left column 150px wide and fills the rest of the vertical space

3) area right of column takes up the rest of the page and scrolls if content is too big (only this area should scroll, not the entire page)

if you can help id appreciate it... thanks

**Nile** · 04-15-2008, 11:50 PM

Alright, I made a picture of what you wanted and just wanted to clarify that this is what you wanted, because, it doesn't look so hot.
http://localhostr.com/files/a01fd9/layout.png

**scrupul0us** · 04-15-2008, 11:54 PM

yea thats right... cept all the lines would meet up nicer

doesnt look so hot?

**Nile** · 04-15-2008, 11:58 PM

Alright. Just checking.

**Nile** · 04-16-2008, 12:21 AM

Alright, this layout works in every browser except SeaMonkey 1.1.8, Windows XP but I dunno why

Code:

<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 100%;
height: 38px;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
}
#left {
width: 15%;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
}
#content {
width: 82.4%;
height: 50%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>

</body>
</html>

**scrupul0us** · 04-16-2008, 01:05 AM

well in theory its just about right

the two columns below the header dont fill the rest of the browser window... there also doesnt seem to be functionality for the right column to handle oversized content... i tried adding overflow:auto; and it didnt behave as expected

thanks for the code so far

**Nile** · 04-16-2008, 02:49 AM

This works perfectly for me:

Code:

<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 995px;
height: 38px;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
font-size: 40px;
color: white;
font-family: arial;
text-align: center;
}
#left {
width: 185px;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#left a {
color: white;
font-size: 26px;
text-decoration: none;
font-family: arial;
}
#left a:hover {
color: lightblue;
}
#content {
width: 795px;
height: 50%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
color: white;
text-indent: 20px;
padding: 2px;
font-family: arial;
overflow: auto;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left"><a href="#">Home</a></div>
<div id="content">Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. 
Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.</div>

</body>
</html>

Since this is an update to my previous, I havn't checked to see if it works in SeaMonkey 1.1.8, Windows XP. But I'll check later.

**scrupul0us** · 04-16-2008, 11:20 AM

well i see the content and left is still set to 50% height... it doesnt take up the rest of the page.. setting to 100% causes the entire page to overflow

**Nile** · 04-16-2008, 11:35 AM

Alright, try this:

Code:

<html>
<head>
<title>Layout</title>
<style type="text/css">
#header {
width: 98.8%;
height: 38px;
background-color: red;
border: 1px solid black;
margin: 5px;
font-size: 40px;
color: white;
font-family: arial;
text-align: center;
}
* html #header {
width: 99%;
}
#left {
width: 15%;
height: 50%;
float: left;
background-color: red;
border: 1px solid black;
margin: 5px;
text-align: center;
}
#left a {
color: white;
font-size: 26px;
text-decoration: none;
font-family: arial;
}
#left a:hover {
color: lightblue;
}
#content {
width: 795px;
height: 88%;
float: right;
background-color: red;
border: 1px solid black;
margin: 5px;
color: white;
text-indent: 20px;
padding: 2px;
font-family: arial;
overflow: auto;
padding-left: 5px;
}
* html #content {
margin: 5px 15px;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="left"><a href="#">Home</a></div>
<div id="content">Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. 
Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.Nullam facilisis metus ac pede. Aliquam metus arcu, condimentum a, facilisis venenatis, volutpat eu, odio. Nam iaculis, massa quis sodales rhoncus, elit lacus sodales justo, non aliquam turpis mauris a tellus. Fusce ut pede sed magna molestie iaculis. Fusce arcu purus, tincidunt sit amet, hendrerit at, porta eu, nibh. Duis ut nisl. Curabitur vulputate imperdiet diam. Aliquam varius viverra dui. Nunc scelerisque nulla et dolor. Sed eget mi. Aenean quis justo nec tellus posuere condimentum. Sed magna orci, dapibus at, aliquet vel, posuere a, dolor. Donec mi. Quisque gravida aliquam pede. Nullam pretium ante sit amet erat. Donec commodo porttitor velit. Donec dapibus. Mauris in ligula id metus pretium laoreet. Etiam justo nulla, dignissim sed, placerat at, gravida ac, eros.</div>

</body>
</html>

Any rest, I'm sure you can fix. But post if you can't

**Nile** · 04-16-2008, 11:18 PM

And this works in all browsers but:
MSIE 8.0
Windows XP

and

Safari 1.3.2
Mac OS X 10.3

So I hope this helps, I don't know how I would make it work in all browsers.

Thread: Looking for a layout not listed

Thread Tools

Search Thread

Looking for a layout not listed

Bookmarks

Bookmarks

Posting Permissions