/    Sign up×
Community /Pin to ProfileBookmark

Challenge: old 2 column layout still unbeaten by CSS

Hi all,

I’ve been trying hard but I can’t figure out this one:

I have two pieces of HTML content inside a container DIV: the first block is short, the second one is LONG.
They must stay up as two columns (the long block can’t wrap under the short one), but NO assumptions on contents of block #1 or #2 can be made: no width values can be chosen.

The intended layout is something like:

[FONT=courier new]
┌───────────────────────────┐
│ External container        │
│ ┌───────┐┌──────────────┐ │
│ │Block 1││ Block 2      │ │
│ └───────┘│ Both widths  │ │
│          │ are UNKNOWN  │ │
│          └──────────────┘ │
└───────────────────────────┘
[/FONT]

i.e. I want to reuse this code in a variety of situations (where I can’t foresee how much content will be on either one but they still must fit two columns) so I can’t use a silly solution like ‘set margin of block X to be wider than block Y and make it float’. Remember: we have NO IDEA of what block 1 or 2 width may be set to.

Any ideas?

TIA,
Hataru Mendo

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@Robert_WellockAug 16.2004 — If you cannot apply a width then it's practically impossible since it's imperative that a div use a width even if inherited or as a percentage.
×

Success!

Help @HataruMendo spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...