How to achieve this layout

**robin.aartsma** · 04-01-2008, 11:43 AM

Hello,

I'm trying to create the layout as displayed below:

But I'm not having any luck with it.
I want to use the screen for 100%, I'm able to achieve that.
The height of Div 5 is about 250px.

The content has to go into div 4 which also should be able to scroll (overflow), this div can stretch to fill up the screen to 100%
Div 3 is the menu which just has to fill up the screen.
Div 2 is the breadcrumb bar (20 px) and div 1 is the header (50px)

Can anyone help me with this? I've wasted quite some time now to achieve this result but not having any luck with it.

**Nile** · 04-01-2008, 11:47 AM

That layout looks doable, I can make it with tables as fast as you blink if you want. But it'll have to wait till tonight. Or do you need divs? That'll take a little longer.

**rangana** · 04-01-2008, 11:53 AM

Nile will code it using tables, while I go for divs

Ideally, it's an easy layout,..and tables wasn't intended for layouts

You have the freedome to choose which way to go

**Nile** · 04-01-2008, 11:55 AM

Originally Posted by Nile

Or do you need divs? That'll take a little longer.

Did you even read my post? Or were you to busy cracking up :smile:. Lol.

**robin.aartsma** · 04-01-2008, 11:56 AM

This layout in tables is quite easy

.

When I'm trying to create this layout with divs and 100% height I'm having troubles...

If anyone of you would be able to take a look how to create this layout in div's I'll be thankful

**boogyman** · 04-01-2008, 01:44 PM

HTML Code:

<body>

<div id="container">
     <div id="header">CONTENT</div>
     <div id="ticker">CONTENT</div>
     <div id="sidebar">
          <ul id="menu">
               <li>LINK</li>
               <li>LINK
                    <ul class="submenu">
                         <li>SUB-LINK</li>
                         <li>SUB-LINK</li>
                    </ul>
               </li>
          </ul>
     </div>
     <div id="bodyContent">
          <div>
               <h1>PAGE TITLE</h1>
               <p>CONTENT</p>
               <p>CONTENT</p>
               <p>CONTENT</p>
          </div>
          <div class="article">
               <h2>SUB HEADING</h2>
               <p>CONTENT</p>
               <p>CONTENT</p>
               <p>CONTENT</p>
          </div>
     </div>
     <h6 id="footer">FOOTER CONTENT</h6>
</div>

</body>

Code:

<style type="text/css">
body {
     margin: 0 auto;
     padding: 0;
     width: 90%;
     text-align: center;
     background-color: #ffffff;
     color: #000000;
     font-size: normal;
}
div#container {
     text-align: left;
}
div#header {
     margin: 0;
     padding: 0;
     width: 100%;
     background-color: #cecece; /* grayish color */
}
div#ticker {
     margin: 0.5em 0 0.5em 0;
     padding: 0;
     width: 100%;
     background-color: #ff9900; /* orangish color */
}
div#sidebar {
     float: left;
     width: 20%;
     background-color: #cecece; /* grayish color */
}
div#sidebar ul#menu {
     margin: 0;
     padding: 0;
     width: 100%;
}
ul li {
     list-style-type: none; /* deletes the bullets */
     display: block;
}
ul.sub-menu {
     display: none; /* start sub-menu invisible */
}
li:hover ul.sub-menu {
     display: block;
     position: relative;
     top: 0;
     left: 100%;
}
div#bodyContent {
     float: right;
     width: 75%;
}
div#bodyContent div {
     margin: 0.5em 0 0.5em 0;
     padding: 0;
     background-color: #cecece; /* grayish color */
}
div.article {
     background-color: #ff9900; /* orangish color */
}
h6#footer {
     clear:both;
     display:block;
     width: 100%;
}

there are some basics

**Medyman** · 04-01-2008, 01:49 PM

If boogyman's code doesn't get you started, it might be better for you to post what you have and we can go off of that.

**robin.aartsma** · 04-01-2008, 02:00 PM

Well the code that boogyman created (thanks

) is almost similar to the code I got so far.

The only difference is some naming. The problem I'm encountering is that my wish to stretch this page. So if I edit some of boogyman's code to make it look like my wish it'll be something like this:

Code:

<style type="text/css">
body {
     margin: 0 auto;
     padding: 0;
     width: 90%;
     text-align: center;
     background-color: #ffffff;
     color: #000000;
     font-size: normal;
}
div#container {
     text-align: left;
}
div#header {
     margin: 0;
     padding: 0;
     width: 100%;
     background-color: #cecece; /* grayish color */
}
div#ticker {
     margin: 0.5em 0 0.5em 0;
     padding: 0;
     width: 100%;
     background-color: #ff9900; /* orangish color */
}
div#sidebar {
     float: left;
     width: 20%;
     background-color: #cecece; /* grayish color */
}
div#sidebar ul#menu {
     margin: 0;
     padding: 0;
     width: 100%;
}
ul li {
     list-style-type: none; /* deletes the bullets */
     display: block;
}
ul.sub-menu {
     display: none; /* start sub-menu invisible */
}
li:hover ul.sub-menu {
     display: block;
     position: relative;
     top: 0;
     left: 100%;
}
div#bodyContent {
     float: right;
     width: 75%;
}
div#bodyContent div {
     margin: 0.5em 0 0.5em 0;
     padding: 0;
     background-color: #cecece; /* grayish color */
}
div.article {
     background-color: #ff9900; /* orangish color */
	height: 200px;
}
</style>

Code:

<body>

<div id="container">
     <div id="header">CONTENT</div>
     <div id="ticker">CONTENT</div>
     <div id="sidebar">
          <ul id="menu">
               <li>LINK</li>
               <li>LINK
                    <ul class="submenu">
                         <li>SUB-LINK</li>
                         <li>SUB-LINK</li>
                    </ul>
               </li>
          </ul>
     </div>
     <div id="bodyContent">
          <div>
               <h1>PAGE TITLE</h1>
               <p>CONTENT</p>
               <p>CONTENT</p>
               <p>CONTENT</p>
          </div>
          <div class="article">
               <h2>SUB HEADING</h2>

          </div>
     </div>
</div>

</body>

The div with "Sub-heading" has a fixed size 200 px.
My wish now is to stretch this page to fill up all of the viewport (100%) and holding the "sub-heading" div, the header div and the subheader div fixed sizes.

So meaning that the "div-sidebar" has to fill up the screen starting underneath the header and that the div containing "<h1>PAGE TITLE</h1>" has to fill up the gap between the header and the "Sub-heading" div (Sub-heading div should be at the bottom of the viewport).

Does this make any sense?

**Medyman** · 04-01-2008, 02:45 PM

Yes, it makes sense but I don't know how it's possible.

If you only want the scrollbar on div4, then you'll have to specify a height. And since you have fixed height elements of the page, you can never be sure what that height is in relation to the viewport (unless you make the header and breadcrumb percentage widths as well).

Everything else is fairly straightforward.

My suggestion would be to let div4 resize based on it's content...moving the footer (div 5) along with it. Then, you can use the faux columns technique to create the sidebar of equal length.

This is what I have that does the above (minus the faux columns). I like my CSS inline, so reformat if you wish to make it "easier" to read.

Code:

<html>
<head>
<style>

html, body { height:100%; width:100%; margin:0; padding:0;}

#div1 { background:gray; height:50px;}
#div2 { background:orange; height:20px; border:5px solid white; border-width:5px 0; }
#div3 { background:gray; height:80%; width:250px; float:left; border-right:5px solid white; }
#content { position:relative; overflow:hidden;}
#div4 { background:#ccc;}
#div5 { background:orange; height:250px; position:absolute; bottom:0; border-top:5px solid white; left:255px; width:100%;}


</style>
</head>
<body>

<div id="container">
	<div id="div1">
		Div 1
	</div>
	
	<div id="div2">
		Div 2
	</div>
	
	<div id="content">		
		<div id="div3">
			Div 3
		</div>
		
		<div id="div4">
			Div 4
		</div>
		
		<div id="div5">
			Div 5
		</div>
		
	</div>

</div>

</body>
</html>

**robin.aartsma** · 04-01-2008, 03:34 PM

It does work as you describe, but only in Firefox (and it might in IE7).
It does not work correctly in IE6 and below (and it should work in IE6).
At least thanks

Anyone else who might know a solution voor the 100% fix?

Thread: How to achieve this layout

Thread Tools

Search Thread

How to achieve this layout

Bookmarks

Bookmarks

Posting Permissions