/    Sign up×
Community /Pin to ProfileBookmark

Auto-expanding divs

Copy linkTweet thisAlerts:
Jul 06.2004

Hi – quick question to the gurus out there that have the knowledge that I am seeking. =). Here’s my problem:

Say I have 2 divs – both are of fixed width. One floats to the left, one float to the right. In between the two is another div, a middle one. I would like to have so, when a user resizes the window, the left and right divs float in their correct positions and stay at their fixed width and the middle div expands to fill in the space.

In IE setting the middle div to 100% width merely make the div 100% of the entire window, royally destroying the layout. I ask, is there a better way????

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@VladdyJul 06.2004 — If you use floats, that means you want them stack up when the window is getting too narrow to accomodate all three?
Copy linkTweet thisAlerts:
@onisemusauthorJul 06.2004 — Hmm - now that I think about it, that would happen wouldn't it? The behavior I would want would be for the middle div to go to a minimum width if the windows shrunk beyond a certain point; so that the width of the left and right div would remain fixed, and the user would have to scroll across the page. Does that make sense? Would it be better to use tables in this instance?
Copy linkTweet thisAlerts:
@VladdyJul 06.2004 — Tables are for tabular data.

If you want to have minimum width for the center blocks and always have the side blocks on the side - use margins on the center block and absolute positioning on the side ones.

See my site for such arrangement or this sample page: www.vladdy.net/Demos/ElementSizing.html
×

Success!

Help @onisemus 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.17,
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,
)...