| Author |
Message |
Jerrik
|
 Posted: 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
|
|
|
Vertico
|
| Posted: 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
|
| Posted: 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
|
|
|
|
|
md
|
| Posted: 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
|
| Posted: 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
|
| Posted: 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
|
| Posted: 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
|
|
|
md
|
| Posted: 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
|
| Posted: 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
|
| Posted: 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  |
|
|
|
|
|
gianni
|
| Posted: 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
I think we just found our solution folks. Three column table, with an i-frame in each! |
|
|
|
|
|
Unforgiven
|
| Posted: Wed Dec 10, 2008 2:42 pm Post subject: RE:Site Layouts |
|
|
| Being able to bookmark a page is so 1990s. |
|
|
|
|
|
shofawaty_ni
|
| Posted: Wed Jan 14, 2009 2:49 am Post subject: Re: Site Layouts |
|
|
i prefer the first style than the 2nd too minimalist 
Gunadarma University
http://gunadarma.ac.id |
|
|
|
|
|
Sniper4Life
|
|
|
|
|
|
Register
Wiki
Blog
Search
Turing
Chat Room
Members
