473,326 Members | 2,134 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

[CSS] column layout without explicitly setting sizes, how!?

8
Having trouble creating a layout with certain conditions like this: (with CSS)



Using tables, it's no problem. But I'm trying to accomplish the same result with CSS instead of tables, and whatever I try (span/div with float, multiple containers, etc), nothing seems to work, or suddenly B wraps under A and C instead of keeping column, etc... :(

My needs: column A should be as wide as required for its content. So I don't want so specify an explicit size in px or % there.
For the remaining space (so B+C), I can specify the size of C in px or % (for example C is 20% or C is 150px wide), and B should get whatever is left.
I also don't want to explicitly specify the height for the columns, they should be as tall as required for the content (so adding more content = column gets taller).

Now, the thing is, the entire width (A+B+C) is not known/fixed in advance. It's dynamic, depending on the content and other layout settings.

What is the most compatible, cleanest way to pull this off?
Dec 18 '09 #1
2 1930
drhowarddrfine
7,435 Expert 4TB
Google for "liquid fluid css layout"
Dec 18 '09 #2
Bram2
8
Thanks, I've worked through several "liquid / fluid css columns" tutorials, but none of them seem to address the issue of having a truly dynamically sized column determining the remaining space for the rest (but rather, the other way round: center column is dynamically sized, determined by a fixed size side column).

Obviously I'm missing something, would you know any particular tutorial or explanation that clears this up? I'd love to learn!
Dec 18 '09 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

59
by: Mason A. Clark | last post by:
Is there information content in this observation? use html tables for layout: http://www.microsoft.com and http://www.netscape.com uses styles: http://www.opera.com
98
by: Pamel | last post by:
I know this must have been asked elsewhere, but I cannot find it. There is a piece of text on my web page that I don't want browsers to resize. IE won't resize it if I specify the size in px, but...
2
by: Mario T. Lanza | last post by:
Greetings, I've been working on a 3-column layout where the center column is of a fixed width (230px wide). The center column must always be 230px and the columns on the right/left (always the...
30
by: Diane Wilson | last post by:
I'm trying (once again) to figure out how to make a robust CSS layout style that can replace tables. I'd like to be able to do a basic two-column layout, with a one-column header, a two column...
12
by: news | last post by:
I'm having a heck of a time, and I'm hoping someone can take a quick look and see if they can recognize what might be the problem and point me the right direction. My blog page:...
17
by: Eric Lindsay | last post by:
Is learning to write CSS a better use of time than finding and using a package that produces complete web pages? I've moved to a new platform (Macintosh), taking with me about 400 personal web...
2
by: saxm-un | last post by:
Hi, I'm just beginning CSS based web development and although I've been bashing away at it since yesterday, I'm still stuck with positioning things on pages. I'm trying to make (in table-speak)...
1
by: akress | last post by:
Hiya, I'm trying to convert a table with 6 colums that looks like this: <table class="myTable" width="640px"> <tr> <td><a href="#"> <img src="../_img/announce.gif" align="middle"...
8
by: Don Li | last post by:
Honestly have not touched CSS for years, so, back to square one on this... What I'd like to do if possible with CSS is this: create a layout that is shrinkable or expandable when a user drag it,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.