Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 12-09-2005, 11:59 PM 3 Column Layout
Fan
Junior Talker

Posts: 2
Trades: 0
I Need A 3 Column CSS Layout That Will Allow Me To Stretch Each Column Without It Affecting The Other Columns (I Believe It Is Called Fluid, Or Liquid?) But Every Layout Code I Have Found The Site Meshes Together As the Screen Or Page Gets Smaller Which Ruins My Page, I Need To Stop That From Happening. Any Ideas?
Fan is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 12-10-2005, 06:21 AM
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 Column</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div style="height:300px;width:15%;float:left;background-color:red;"></div>
<div style="height:300px;width:65%;float:left;background-color:green;"></div>
<div style="height:300px;width:15%;float:left;background-color:blue;"></div>

</body>
</html>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 12-10-2005, 12:13 PM
Fan
Junior Talker

Posts: 2
Trades: 0
Thanks, But I'm Still Having The Same Troubles. When I Make The Browser Smaller, The Columns Get Smaller. I Need Them To Have A Set Size. Any Ideas?
Fan is offline
Reply With Quote
View Public Profile
 
Old 12-10-2005, 02:35 PM
CannonBallGuy's Avatar
Webmaster Talker

Posts: 618
Trades: 2
Then you need the complete opposite:
A fixed layout.
Try looking for what you want at http://www.ssi-developer.net/main/templates/3col.shtml

- CBG
CannonBallGuy is offline
Reply With Quote
View Public Profile
 
Old 12-10-2005, 02:44 PM
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Please don't capitalise every word it makes it hard to read

You asked for a fluid layout which is what the code above is. So is what you are after an all fixed width with set size columns or some columns fixed and some fluid or what?

All that is needed for fixing the widths is to replace the "width:nn%" with "width:nnnpx" to set the column to a fixed value.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 12-12-2005, 10:04 AM
ibbo's Avatar
Super Spam Talker

Posts: 880
Location: Leeds UK
Trades: 0
You dont need a fixed layout at all.

Keep the css above but create an additional container with a set size of yey-px.

Then you can add the remaining elements within your container keeping your fluid layout but bound by the rules of the container.

I.E.

<div style="height:310;width:500px;border:1px solid black">
<div style="height:300px;width:15%;float:left;backgroun d-color:red;"></div>
<div style="height:300px;width:65%;float:left;backgroun d-color:green;"></div>
<div style="height:300px;width:15%;float:left;backgroun d-color:blue;"></div>
</div>

This then will create you a 300x500px box and your remaining element will then fill up this space with their own boxes bound by the rules of their style. You can shrink or stretch the browser but it should remain visible and not wrap (which is what floats do I'm afraid if you dont manage them propoerly).

Ibbo
__________________

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Linux user #349545 :
(GNU/Linux)iD8DBQBAzWjX+MZAIjBWXGURAmflAKCntuBbuKCWenpm XoA7LNydllVQOwCf
ibbo is offline
Reply With Quote
View Public Profile Visit ibbo's homepage!
 
Old 12-14-2005, 01:40 PM
Mooofasa's Avatar
Defies a Status

Posts: 1,611
Name: Michael (mik) Land
Location: England
Trades: 0
Use em instead of px. And combine it with the suggestions shown before.

To convert px to em, use 1.38/22 * px (just replace px with your pixel size).
__________________

Please login or register to view this content. Registration is FREE
- Tumblog with thoughts, quotes, links, videos, images and my creations.

Please login or register to view this content. Registration is FREE
- The best free web browser.

Please login or register to view this content. Registration is FREE
- Firefox is now Firefail.
Mooofasa is offline
Reply With Quote
View Public Profile Visit Mooofasa's homepage!
 
Reply     « Reply to 3 Column 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.67123 seconds with 12 queries