I have learnt about floating <div> tags when I didn’t actually need to. Oh Well, it wil become a useful tool one day, perhaps. I wanted the main content of my page to be centered with images running down the page either side.
Originally I created a left column at 100px wide, a center column at 700px wide and a right column at 100px wide, applying a float: left; element to these columns meant that they “floated” next to each other. Once these were placed, I then needed to apply a ‘clear’ element to the following <div> tags to stop it trying to float next to the other columns. Although it would not float next to them because they filled the maximum width of my ‘wrapper” <div> tag it would float behind the center column.
I played around with this three column layout for a while. It started to cause me massive problems. The left and right columns, wouldn’t stretch to the same height as the center content column. I would have to specify specific heights to all three columns, and then specify the height of all three columns accros all pages of the site. This was massively time consuming and increased file size due to seperate images being loaded on either side column.
MY SOLUTION: although it seems really obvious to me know, I had an epiphany. I realised I didn’t need the three columns. I needed another ‘wrapper’ type <div> tag, which I called <contentwrapper>. for my content. I placed another <div> tag 900px wide inside and below my image and navigation boxes. Inside this <div> tag I created a <div> tag 700px wide and set both its left and right margins to auto, centering the 700px <div> within the <900px> div.
This allowed me to create an image in Photoshop 900px wide, and approx 300px high, I placed this image in the background of the 900px contentwrapper <div> tag, and making it repeat.
This means the same layout can be used across all the pages of the site without having to specify heights for the content <div> tags. This means the content of each page can be changed relatively simply without needing much extra coding, if any!
