nibbo Posted March 29, 2008 Share Posted March 29, 2008 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: Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 29, 2008 Share Posted March 29, 2008 Its called a "liquid" layout (as opposed to a "fixed" layout. It can be done. But it is extremely advanced unless you are keeping your pages simple. You will need to use "relative" dimensions sizes (like percentage or EMs) instead of pixels. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted March 30, 2008 Share Posted March 30, 2008 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) Quote Link to comment Share on other sites More sharing options...
nibbo Posted March 30, 2008 Author Share Posted March 30, 2008 Thanks for the replies they really did help; I have got it working now. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted March 31, 2008 Share Posted March 31, 2008 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. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 1, 2008 Share Posted April 1, 2008 dbrim: with this ferrero roche you are really spoiling me (UK ad joke - brits will get it!!!) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.