pez,
Check out the Piefecta setup at http://positioniseverything.net/ and you will find some very good documentation and all the CSS you need to set something like this up.
Fluid Center 3-Column CSS WP Layout (27 posts)
-
NuclearMoose
Posted 4 years ago # -
You need Ryan Brills negative margin layout at alistapart.
-
This maybe a bit dated now, but if you haven't already come across it, then it may give you some clues... http://bluerobot.com/web/layouts/layout3.html
-
Here is something I prepared earlier
. Please note this is a boilerplate and my templates have changed names since. -
serendipity
Posted 4 years ago #Great! Another source of inspiration for WP based newbie web designers.
-
Anonymous
Posted 4 years ago #Use a table. Seriously. As things currently stand, you cannot produce a cross-browser compatible, fluid three-col layout with columns of equal length using CSS alone. Give up the liquid central column, give up the equal lengths, or give up the dream of doing it with CSS. No technology is perfect.
-
I have spent a lot of time futzing with 3 col flexible widths for *Vesuvius*. This kind of stuff is the very reason it is still where it belongs. On the drawing board.
As I understood the negative margin solution the source order was reversed in the 3 col solution. although the 3 px jog is presumably curable. Just my 2c. -
pezastic
Posted 4 years ago #After spending numerous hours searching for a cross-browser solution to my 3-column template problem, I came across these three candidates:
http://meadhra.com/CNET/040714/3col-float-FigD.html
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_C.mhtml
http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm
I think it would be fantastic if someone-in-the-know could adapt one of those to WP. -
Posted 4 years ago #@serendipity: the original poster asked how to make a specific kind of layout for WP. I advised them to use a table. That is support. It may not be support for CSS, but it is support for the user.
Off-topic sniping at other posters, however, is not support in any sense of the word. -
Stuart
Posted 4 years ago #Mmmm. Fluid eh? Maybe I should have a look. Do you have anything up and running? Or can I get your CSS. I usually find it best to "fix" the menu widths and let the content fill the centre but unless I can see where you're at????
-
theglobalguy
Posted 4 years ago #@Pez, take a look at my site...three column, center fluid works great with WP. No gutters, but I don't really like them anyway.
-
I took your hint actually - I've been watching :)
-
Sheesh. You found it then? Is it OK in IE anybody?
-
Posted 4 years ago #@pez, any chance you could send me a screen shot? I'm using IE6 90% of the time, and I'm not seeing the errors you're talking about. I'm especially concerned about the center column expanding under the rightside one. I have seen the weather box do that occassionally, but if I refresh it goes away..maybe I need to do something about that.
Each section is not in it's own div. There's basically a header, footer, center, left and right div.
The column lengths on my screen extend all the way to the bottom...if you look very carefully you can see where the background image intersects between the columns and the footer. -
Root:
I see no green, and I get a horiz scrollbar of about 2px ? -
Well its orange! h scroll is wierd. Width is 100% with max width. This must be an IE thing. Try different viewport sizes please.
-
h scroll is now dead.
-
Posted 4 years ago #Here's what it looks like on both Firefox and IE latest versions:
http://www.theglobalguy.com/wp-photos/rootshot.jpg -
Thanks. Seems Ok. Its too late now :)
-
jonimueller
Posted 4 years ago #I swear, t'was not I who anonymously suggested tables. That layout looks great, but it makes me very hungry for an orange popsicle which I just happen to remember I have in my freezer.
http://www.popsicle.com/treats/Fun_and_Fruity.asp
Later! -
Posted 4 years ago #@theglobalguy: Replace the following in your css and all will look good, at least with IE 6:
#lh-col {
position: absolute;
top: 156px;
left: 0;
width: 200px;
z-index: 3;
background: #063;
background-image: url(images/flwblockb.jpg);
color: #fff;
}
#rh-col {
position: absolute;
top: 156px;
right: 5px;
width: 200px;
z-index: 7;
background: #063;
background-image: url(images/flwblockb.jpg);
color: #333;
}
#c-col {
margin: 0 210px 0 205px;
position: relative;
padding: 0;
background: #063;
background-image: url(images/flwblockb.jpg);
color: #333;
z-index: 5;
height: 80%;
} -
Thanks for pointing out the bugs in Vesuvius and to the guys who have put up screenies. It is really useful. I will certainly be tweaking. But that is now four of my templates which have borked on the comments page, when they got started.
I do not know what causes it but there is something spooky about those comments, both inline and in the pop ups. -
Posted 4 years ago #@pez -- Thanks, that seems to have done the trick!
To fix the weather size, I just explicitly specified the .gif size in index.php. We only have 'net access for about 8 hours a day, so unfortunately there are times when the weather data times out, and you'll get the "no data available" message. -
I have to say it is really wierd how the li children are set at 142% in the default. Tx for pointing it out. I have also applied my comment box hack to the odd behavior of the comment input box. Hopefully that is going to solve most of the issues.
-
Bunker
Posted 3 years ago #Got me all interested...then the links don't work!
-
orangeguru
Posted 3 years ago #This is becoming my fav WP support link:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
;-)
Regarding the old discussion tables vs CSS:
If you feel comfy with CSS use it - otherwise use one simple table to define your blog structure.
-
I guess I should put this layout demo http://stijlstek.nl/demo/beirut/
into a WP theme sometime. I know it's not perfect, but at least it works in Firefox and IE (don't know about Mac browsers yet). It's a pure CSS solution, and it seems people want something like that.
Topic Closed
This topic has been closed to new replies.