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?
2  1968 
Google for "liquid fluid css layout"
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!
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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
|
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 everything else will. Is there any
way to prevent browsers from resizing text?
If you could just point me to where this has already been answered, that would
be great.
Paul
|
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 same size as eachother) must
always take up the remaining width of the browser.
I have been designing for Firefox and IE and routinely viewing the
results in both.
|
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 body, and a two-column footer.
The problem, and one that always sends me back to using tables,
is that word "robust." Absolute positioning gets squirrelly,
because it takes the positioned elements completely out of the
float scheme, and stuff...
|
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: http://www.celticbear.com/weblog/ looks fine in Firefox
and Opera, but in IE6, the main body block positions itself below the
left menu bar.
I've W3C validated the XML Schema, HTML, and CSS and fixed a couple of
errors and all three now give me a "valid"...
| | |
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 pages, some dating back so far I probably wrote them in vi.
About 4 years ago (thanks in part to hints found in this group) I
converted about 80 pages to CSS, and was fairly happy with the result,
plain though they are. Since then I've forgotten...
|
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) two (or possibly more later) rows
each of three columns, with a table width 60% of the width of the
screen with a 10% left hand margin. I've been bashing away at the CSS
for a while now, and I'm almost there (except I can't get the top-edge
of...
|
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" border="0"></a>
</td>
<td><a href="#">
|
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,
kind of like a window on a desktop, you can drag it to make it bigger
or smaller... so, the content within would also be proportionally
shrunk or expanded...
Is it possible with CSS? If so, could you show an example?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |
