How to achieve this layout [Archive]

View Full Version : How to achieve this layout

robin.aartsma

04-01-2008, 11:43 AM

Hello,

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

http://www.schoolbestanden.nl/tweakers_divs.jpg

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 (http://hotdesign.com/seybold)

You have the freedome to choose which way to go :)

Nile

04-01-2008, 11:55 AM

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

<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>

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

<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>

<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.

<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? :)

boogyman

04-01-2008, 09:19 PM

Medyman

04-02-2008, 03:42 AM

If you want the entire page to last exactly 100% of the viewport of the users browser you will need to use Javascript. As MedyMan stated, I would suggest that you let the content determine how large (high) the content is, however if you wish to limit the height so anyone with a viewport of more, would see a scrollbar on the div4 section you could set a maximum height of that body container tag to a certain height and set a css property overflow: hidden

Exactly...

You can't have something that is flexible in height but then also bound within those constraints. You either have to have something that changes height or something that is restricted to a certain height.

What I gave can easily be worked out in IE6, etc... I didn't think it necessary to troubleshoot since it wasn't exactly what you were looking for.

With that said, if your layout can be made vertically fluid (no fixed heights), you can achieve what you want.

rangana

04-02-2008, 04:26 AM

Having the proper in every page should get this rendering almost identical (http://www.alistapart.com/articles/doctype/DTD) :)

See this code, with slight ammendments on boogyman's ;)

I just set the a container's height...and everything will be fine ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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:100%; width:250px; float:left; border-right:5px solid white; }
#content { position:relative; overflow:hidden;height:480px;}
#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>

See if it helps ;)

boogyman

04-02-2008, 05:40 PM

#div3 { background:gray; height:100%; width:250px; float:left; border-right:5px solid white; }

that will produce 100% of the content, not the viewport.

#content { position:relative; overflow:hidden;height:480px;}

what if someone has 640x400 screen resolution? you would get the vertical scroll bar on the page (viewport)
what if someone had 1280x1024 screen resolution? you would get a vertical scroll bar on the element, while the page (viewport) doesn't have one

The use of bottom absolute positioning is nice, and you could bring it 1 step further by setting the z-index:100 to ensure that it is above the <div id="content">, however how do you know the height of the content div?

Conventions were made for a reason, and shouldn't be broken for cosmetic reasons. If you truly want to achieve this layout you will be forced to use some Javascript code to obtain the viewport and set the styles accordingly, but there are problems with that
1. any user can disable Javascript on any browser
2. the Javascript will only adjust the height of the element upon the page first being loaded...
2q. but but you can set the adjustment function to a setInterval value
2a. Yes, however you would be refreshing your page after that interval, in which case will most likely upset the browser to either turn off Javascript or exit your page.

I realize that you are having problems with IE6, and that will be a constant struggle for all web developers, until most users stop using that version... With any luck, HTML5 will speed that process up, as IE6 and below undoubtably has NO support for the new almost complete redesign of structure.

robin.aartsma

04-02-2008, 05:47 PM

Rangana, thank you very for your example.
The width is good (also in IE6 and lower) but the heigth isn't :(
I've tried to set the #container to 100%, I also tried to set
#div3 and #div4 to 100%, but then it fills up like 120% in IE.
Just like Boogyman said: it changes the content, not the
viewport.
Can someone give me a solution? I appreciate the help very much!

@ Boogyman:
You are absolutely right. The reasons you mentioned to not-use
javasript are obvious. In the past I've used tables to achieve these
kind of layout. But as we go further it's not desirable anymore to
do it this way (although this will do wat we want).
Do you maybe have suggestions to achieve the layout we want?

Medyman

04-02-2008, 05:59 PM

Rangana, thank you very for your example.
The width is good (also in IE6 and lower) but the heigth isn't :(
I've tried to set the #container to 100%, I also tried to set
#div3 and #div4 to 100%, but then it fills up like 120% in IE.
Can someone give me a solution? I appreciate the help very much!

@ Boodyman:
You are absolutely right. The reasons you mentioned to not-use
javasript are obvious. In the past I've used tables to achieve these
kind of layout. But as we go further it's not desirable anymore to
do it this way.
Do you maybe have suggestions to achieve the layout we want?

As I mentioned in my last post, your current layout is simply not possible. You cannot have an element that has a flexible height but also bound within those constraints.

Either you have to let the browser dictate the height and control the content or you have set the height and the presentation.

Sorry to say, that there is simply no way to to accomplish what you want with standards-compliant HTML/CSS (javascript is another question).

robin.aartsma

04-02-2008, 06:14 PM

Sorry to say, that there is simply no way to to accomplish what you want with standards-compliant HTML/CSS (javascript is another question).
Ok, that is obvious! Thank you! What would be your suggestion?
Using JS with the danger that users disable Javascript on any browser? Or another way/workaround?

Medyman

04-02-2008, 06:20 PM

Ok, that is obvious! Thank you! What would be your suggestion?
Using JS with the danger that users disable Javascript on any browser? Or another way/workaround?

My suggestion is what I've said before...to change the design. I don't know what your website is for or how essential the "flexible-fixed" height of div4 is.

If I were making that page, I would let div4 expand based on the content within it. That would mean you would have to forgo having something that is only 100% of the viewport (i.e. it might be more).

Maybe if you explain your goal and thinking behind wanting the page to not scroll (as a whole), I could offer some better advice.

I wouldn't recommend using javascript (javascript is fine for non-essential elements, something extra for your site...not for something as basic as the layout). The other "workaround" would be to use iframes, which I also would not recommend.

robin.aartsma

04-02-2008, 06:53 PM

Ok, the explanation:

#div1: header
#div2: bread crumbs
#div3: menu
#div4: content
#div5: extra information per page

I hope you have got enough information.

Medyman

04-02-2008, 07:06 PM

Ok, the explanation:

#div1: header
#div2: bread crumbs
#div3: menu
#div4: content
#div5: extra information per page

I hope you have got enough information.

I knew that. I read your first post. What I meant was what's your rationale for preventing the page from scrolling (i.e. what are you gaining from limiting the accessibility of your content).

robin.aartsma

04-02-2008, 07:29 PM

I think there is a misunderstanding, the page is allowed to scroll. But I'd like the page to fill 100%. #div3 should fill up to 100% (in viewport), #div5 should have a fixed size (positioned at the bottom of the page) and #div4 should fill the page.
Does this make sense?

boogyman

04-03-2008, 01:35 PM

umm... okay let me ask the question this way.

you want your entire page to be 100% of the viewport whether the content on the page contains that much or not.
If it doesn't you want div#5 to be presented at bottom
If it has a height of more than 100%, div#5 will scroll accordingly

If the above is the case, that is impossible. simply having the page be 100% of the viewport regardless of the actual content height MUST require Javascript. Unfortunately there is no way to get around that. I would love to help you, but if that's what you want, there is no point in going round-and-round... if the above is not what you want, can you please explain thoroughly and give examples...

page is shorter than 100% viewport
page is exactly 100% viewport (by chance at what person has set browser to)
page is longer than 100% viewport

While the Javascript option would be limited, it would be the best solution if you do want to achieve the layout as described above... Browsers can also turn off CSS, but we still apply CSS styles to a page... There is nothing that we can do to physically force a browser to view the page a certain way... the browser platforms allow for a multitude of capabilities for the user to control his/her viewing of a page, so all we as developers can do is attempt to create a website and deliver it in a way that is compatible across as many browser platforms and versions, and in a manner that we believe is acceptable and will offer the most usefulness to the user on the other end viewing it.

Medyman

04-03-2008, 03:13 PM

Boogyman,

That's simply not true. It is possible with CSS.

The only restriction, as I understood (past tense) Robin, is that page could not exceed 100% of the viewport.

It seems I was misunderstanding that. So, if the page is allowed to exceed 100%, then everything you want robin is possible.

It will be very much like the first CSS coding that I posted. You'll need to use the faux column technique (http://www.alistapart.com/articles/fauxcolumns/) to get your sidebar to equal the length of the page below the header/breadcrumb.

You'll also need to use this technique (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) (shown by Matthew Taylor) to have div5 always at the bottom of your page.

That *should* fix everything.

boogyman

04-03-2008, 07:03 PM

You'll also need to use this technique (shown by Matthew Taylor) to have div5 always at the bottom of your page.

Umm.. I thought he only wanted div5 to be at the bottom if the page wasnt 100% of the viewport... i guess i just interpreted it incorrectly

Medyman

04-03-2008, 08:17 PM

Umm.. I thought he only wanted div5 to be at the bottom if the page wasnt 100% of the viewport... i guess i just interpreted it incorrectly

Lol...you may well be right. At this point, I'm totally confused as to what the OP wants.

sandyk3

04-04-2008, 03:34 AM

Is this what you are trying to do?

http://webdesign.about.com/od/freewebtemplates/p/bl2colheadfoot.htm

Sandy

LadynRed

04-05-2008, 04:08 PM

If you want 100% of the viewport, you're going to have specify the height:100% on html and the body, like this:

html, body{ height: 100%;}

Then you're going to need to specify the same height 100% on the divs you want to stretch.

Frankly, the easiest way around this is the faux-columns method.

Lastly, using an H6 for a footer isn't semantically correct, it's NOT a 'header'.

As for the footer staying at the bottom, you might want to also read this :http://www.themaninblue.com/writing/perspective/2005/08/29/