Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 Site Layouts
Index -> Web Design
Goto page 1, 2  Next
View previous topic Printable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Jerrik




PostPosted: Fri Nov 14, 2008 2:28 am   Post subject: Site Layouts

I was wondering if anyone had any good resource for site layouts using CSS and <div> tags? I'm currently building a template for my site, but I run into a lot of problems. Every template I've found, even ones found in my Dreamweaver fail in some way. I'm looking for the following setup:

code:

. ----------------------.
|         Header        |
.-----------------------.
|    |           |      |
|    |           |      |
| C1 |     C3    |  C2  |
|    |           |      |
|    |           |      |
.-----------------------.
|         Footer        |
.-----------------------.


C1 and C2 are a FIXED width. C3 gets 100% of the remaining space. The header and footer also span 100% of their space, and have a variabled height.

The difficulty with this design, is that I can't figure out how to make all three columns C1, C3, and C2 span the entire height of the longest column. Here is something that keeps happening:

code:

. ----------------------.
|         Header        |
.-----------------------.
|    |           |  C2  |
|    |           |______|
| C1 |     C3           |
|____|                  |
                        |
.-----------------------.
|         Footer        |
.-----------------------.


This is how the browser renders it when you have C2 to be really short, and C3 determines the height (imagine it filled with content).

Does anyone have any ideas? I'm willing to try them and test them.
Sponsor
Sponsor
Sponsor
sponsor
Vertico




PostPosted: Fri Nov 14, 2008 8:22 am   Post subject: Re: Site Layouts

If C1 C2 and C3 are not connected in anyway, or have equal amount of presented objects they wont naturally stay the same height.

You could just give an outer div for each height:100%; and that should work. You may need to throw in a vertically aligned top as well.

or

If they are in a table, then all three col will stay the same height, then just make sure that each col is vertically-aligned:top.
Though you may not want to use a table for certain reasons.
Zren




PostPosted: Fri Nov 14, 2008 8:26 am   Post subject: Re: Site Layouts

This is kinda a trick and not really a full out proper way to solve this with CSS.

If C1 & C2 are inside of C3 (like how it appears in the second figure) then you can make C3's background image to incorperate the background colors of C1 & C2.

Eg IMG file:
███████████████████████████
Vertico




PostPosted: Fri Nov 14, 2008 8:28 am   Post subject: Re: Site Layouts

http://www.ejeliot.com/blog/61

This site has a few work a rounds you can try.
md




PostPosted: Sat Nov 15, 2008 12:24 am   Post subject: RE:Site Layouts

just set clear: both in your footer, make C1 float left, C3 float right, and give C2 the appropriate left and right margins.

[edit]

HTML:

<body>
        <div style='width: 100%; height: 100px;'>
                header
        </div>
        <div style='float: left; width: 200px;'>
                left
        </div>
        <div style='margin-left: 200px; margin-right: 300px; min-width: 40px;'>
                middle
        </div
        <div style='float:right; width: 300px;'>

                right
        </div>
        <div style='clear: both; width: 100%; height: 50px;'>
                footer
        </div>
</body>
gianni




PostPosted: Tue Dec 09, 2008 1:06 pm   Post subject: RE:Site Layouts

Zren has the right idea here. That is the most often used "hack" to simulate equal height columns in CSS. Although some fancy new CSS3 column styles are available, but they for sure won't be supported in IE for at least another 5 years (woohoo progress!).
md




PostPosted: Tue Dec 09, 2008 4:39 pm   Post subject: RE:Site Layouts

There is also postition:absolute. Then you can set things up rather easily and have it scale. Though I don't know how IE treats it... IE breaks everything.
gianni




PostPosted: Tue Dec 09, 2008 4:47 pm   Post subject: Re: RE:Site Layouts

md @ Tue Dec 09, 2008 4:39 pm wrote:
There is also postition:absolute. Then you can set things up rather easily and have it scale. Though I don't know how IE treats it... IE breaks everything.


That doesn't solve the equal-height column issue. The only time that I think absolutely positioned elements are useful are when you'd like to break from the natural flow of the page.
Sponsor
Sponsor
Sponsor
sponsor
md




PostPosted: Wed Dec 10, 2008 12:46 pm   Post subject: RE:Site Layouts

Sure it does, set bottom for all three columns to be 50px, or whatever the height of your footer is.
gianni




PostPosted: Wed Dec 10, 2008 1:03 pm   Post subject: RE:Site Layouts

Still have the same issue, except now the tops are uneven instead of the bottoms. If you set a height, then you're screwed if your content is too long.
Zren




PostPosted: Wed Dec 10, 2008 2:17 pm   Post subject: Re: RE:Site Layouts

gianni @ Wed Dec 10, 2008 1:03 pm wrote:
Still have the same issue, except now the tops are uneven instead of the bottoms. If you set a height, then you're screwed if your content is too long.

Not if you use IFrames Wink
gianni




PostPosted: Wed Dec 10, 2008 2:19 pm   Post subject: Re: RE:Site Layouts

Zren @ Wed Dec 10, 2008 2:17 pm wrote:
gianni @ Wed Dec 10, 2008 1:03 pm wrote:
Still have the same issue, except now the tops are uneven instead of the bottoms. If you set a height, then you're screwed if your content is too long.

Not if you use IFrames Wink


I think we just found our solution folks. Three column table, with an i-frame in each!
Unforgiven




PostPosted: Wed Dec 10, 2008 2:42 pm   Post subject: RE:Site Layouts

Being able to bookmark a page is so 1990s.
shofawaty_ni




PostPosted: Wed Jan 14, 2009 2:49 am   Post subject: Re: Site Layouts

i prefer the first style than the 2nd too minimalist Smile


Gunadarma University
http://gunadarma.ac.id
Sniper4Life




PostPosted: Mon Apr 27, 2009 5:40 pm   Post subject: RE:Site Layouts

http://www.freecsstemplates.org/

thats a good site to get css templates Very Happy
i use it
Display posts from previous:   
   Index -> Web Design
View previous topic Tell A FriendPrintable versionDownload TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 2  [ 17 Posts ]
Goto page 1, 2  Next
Jump to:   


Style:  
Search: