Reply
[HELP] 3 Row Horizontal Layout
Old 10-12-2008, 10:12 AM [HELP] 3 Row Horizontal Layout
Junior Talker

Posts: 4
Trades: 0
Hi guys, i have a quick question.
I'm making a site and i need my div layers positioned with a header and a footer positioned at the top left, and bottom left of the site respectively.
I have that done with this bit-o-code
Code:
#top {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 209px;
    min-height: 209px;
    width: 100%;
    min-width: 100%;
    margin-left: -1px;
    background-image: url(exportmedia/top.jpg);
    background-repeat: repeat-x;
    z-index: 3;
}
#bottom {
    position: absolute;
    z-index: 2;
    bottom: 0px;
    left: 0px;
    height: 127px;
    min-height: 127px;
    width: 100%;
    min-width: 100%;
    margin-left: -1px;
    background-image: url(exportmedia/bottom.jpg);
    background-repeat: repeat-x;
}
As you can see i get very creative with naming my div's

Now, i need a center div for the content. My problem is that i will be building a CMS system for my client, so i don't know how tall the content might get. A static layout where the content pushes the top/bottom of my layout won't work either because the site needs to be at least 100% of the site. If there was a way of doing that i would be happy.
Right now the structure for my middle layer is as follows
Code:
<div id="middle">
    <div id="push_top"></div>
    <div id="content"></div>
    <div id="push_bottom"></div>
</div>
The push divs are making shure the content div is always visible. And middle has it's overflow set to auto, to take care of any size issued. My only problem is with the way that the scroll bar appears.
If it helps, i have attached my project files to this post.

I appriciate any help.
Thank you for your time
~Gabor Szauer
Attached Files
File Type: zip project.zip (8.9 KB, 0 views)
gszauer is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 10-12-2008, 06:51 PM Re: [HELP] 3 Row Horizontal Layout
Experienced Talker

Posts: 34
Trades: 0
Basically the only thing you need to do is have all your levels with a position of relative and make sure you have your body element with the following: margin: 0; padding: 0;. This should do it.

Kind Regards,

Brannon
http://www.goodboyweb.com
pingeyeg is offline
Reply With Quote
View Public Profile
 
Old 10-12-2008, 08:24 PM Re: [HELP] 3 Row Horizontal Layout
LadynRed's Avatar
Super Moderator

Posts: 9,036
Location: Tennessee
Trades: 0
Sorry, I have to disagree. It is NOT a good idea to position everything with absolute or relative. I would not use position:absolute for your header and footer. Learn to use the normal document flow and floats and you'll be better off in the end.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to [HELP] 3 Row Horizontal Layout
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.09939 seconds with 14 queries