Liquid Layout

[kae101]

Hi there!

I want my getting lippy site to have a liquid layout. So far its gone well, I have set a minimum size and maximum size for it to go but there is one part I can't get to behave.

I have a main content section which takes up about 2 thirds of my page, then to the right of this I have a 'social bar' where I have my facebook, twitter and myspace links. I want this social bar to stay to the right of the main content, however small the browser window is but with float, when the window gets small enough, the social bar slides underneath.

how can I make sure its always to the right?

KA

[Kris M]

Hey KA. I've conlcuded that a liquid layout is how I'm going to need to go too.

I've developed my design in photoshop and will try taking it through to HTML this weekend. Let's keep in close contact though as I reckon we'll come across the same issues.

[francis]

I don't have a copy, but I've heard good things about Flexible Web Design: Creating Liquid and Elastic Layouts with CSS (http://www.amazon.co.uk/Flexible-Web-Design-Creating-Elastic/dp/0321553845/ref=sr_1_1?ie=UTF8&s=books&qid=1265803394&sr=8-1). Might be worth a purchase...

[kae101]

I know David did something similar with CAD tutor, as his central column is liquid with fixed parts either side. Maybe he could shed some light?

KA

[kae101]

Right before I boot my laptop out the window can someone go to tell me why www.gettinglippy.co.uk is showing up fine in later versions of IE and firefox, but not in Chrome. I even got the social bar to remain to the right with position: relative.

I blame myself entirely for trying something new and I clearly am not man enough for liquid layouts (I even made the Nav bar a 'sliding door' so it would expand without breaking). Although some will notice my rounded corners and transparent colour block, I am sooooo year 3000.

KA

[David]

I know David did something similar with CAD tutor, as his central column is liquid with fixed parts either side. Maybe he could shed some light?

The CADTutor layout works perfectly well in practice but is very complicated and I rather regret adopting it - the next version will be simpler.

However, for your layout, I'd head over to Dynamic Drive and see what's on offer. I found this: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/

[kae101]

Thank you for this! I have got it to expand and contract in firefox and later editions of IE but for some reason the part that says 'join us on facebook' etc is not showing in Chrome, Safari etc. I can't find anything on why this is (everything moans about IE but not about these browsers). Anyone know why this 'socialbar' isn't showing?

KA

[David]

You would expect Chrome and Safari to look the same because they use the same render engine - very odd that it doesn't display at all. Does the CSS and markup validate?

[francis]

It's not exactly the same rendering engine - Google, Apple and others contribute to it (http://en.wikipedia.org/wiki/WebKit) but they obviously have their own release schedules, bugs, and so on (http://neugierig.org/software/chromium/notes/). Then there's the difference in platforms - Chrome for the Mac isn't the same as the PC, for example.

[David]

Thanks for the clarification Francis. So glad someone has a handle on the fine detail!