Jump to content

Variable number of culumns


nibbo

Recommended Posts

Hi all

 

Not sure if this is even possible but here goes:

 

I am building a typical web page with three div's (leftcontent, maincontent & rightcontent).

This all works fine but what I want to do now is output several images in the maincontent div but make it dependant on the available width.

i.e. show as many images as possible across the width of the maincontent div before a newline is started.

 

A bit like windows explorer where on my widescreen laptop I get 12 icons but on my PC I only get 8 and these vary depending on the window size.

 

Am I mad to even think this can be done? I am sure I saw it somewhere but can't find it anywhere.

 

Any pointers appriociated, thanks in advance:

 

Link to comment
Share on other sites

give your main content a % width (this is relative to the available width - the viewport - em relates to text size and NOT viewport width).

 

then simply float the images - they will use the amount of space availabel before moving on to teh next line (oft done best inside an unordered list)

Link to comment
Share on other sites

If you haven't designed your site to look good in 1280 x 1040 widescreen format than it isn't as simple as you think.

 

TM's sites are a perfect example of a sites that would scale well. They are clean and uncluttered. But few of us have clients that allow us to dictate plenty of white-space.

 

If you are used to pixel-perfect alignment of everything, then a liquid layout is not simple to scale.

 

But, if you use graphics or photos, then I suggest that you actually design your site on a widescreen laptop first.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.