mousemat24
asked on
Help with a 3 column layout in HTML/CSS
Hi there
Can someone please convert the following images to HTML/CSS, please note it MUST be using DIVs, not tables.
The content must be centered, the middle bit must be 900 px. On either side, I want to add 2 seperate images as a background.
also if a user resizes the window down, only the 900px should be displayed i.e. not the images on either side of the DIVs?
Hope this makes sense?
thanks guys
Can someone please convert the following images to HTML/CSS, please note it MUST be using DIVs, not tables.
The content must be centered, the middle bit must be 900 px. On either side, I want to add 2 seperate images as a background.
also if a user resizes the window down, only the 900px should be displayed i.e. not the images on either side of the DIVs?
Hope this makes sense?
thanks guys
I should note, the markup is a little confusing since the center column is actually the first div in the HTML. This is good for SEO - the center column (presumably your main content) is the first content that the search engine bot sees when it scans your page.
ASKER
Hi AngryBinary
Thanks for that, I find the CSS here really hard, when I resize the window down, I still get the 1st column, is it possible to only show the middle column if the user resizes it down?
Thanks for that, I find the CSS here really hard, when I resize the window down, I still get the 1st column, is it possible to only show the middle column if the user resizes it down?
Not if you set hard widths on the column sizes, unless you want to use JavaScript hacks to modify the page when the window size changes. In order to keep the center column in the center, you would need to use a fluid layout that adjusts with the size of the window, using percentages instead of pixel measurements. Of course, that has different implications as the window is re-sized.
ASKER
ok AngryBinary,if it means percentages, would you mind please coding it, bearing in mind the middle must be the biggest width... its pretty much like what you've done, but using percentages instead.
I hope this is not to much to code?
thanks AngryBinary
I hope this is not to much to code?
thanks AngryBinary
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thank AngryBinary , I think that will work just right for me.
Thankyou soooo much
Thankyou soooo much
Open in new window
It is a skeleton pared down from the examples provided here: http://matthewjamestaylor.com/blog/perfect-3-column.htm