Same height columns not working and some other things

hey guys,
so this is the first website i made after the example one from one of the sitepoint books. I tried using smae height columns but somehow they aren’t working. also when i make the window smaller it starts messing up and on the iphone it looks pretty bad because the images break out.

this is the website: http://deewane.ca/home1.html

all help is appreciated
thanks :smiley:

Hi,

What is the exact problems with the columns? They seem to look ok in most browsers apart from IE6 where the whole site is broken so I guessed you didn’t support IE6.

There doesn’t seem to be much point in having small fluid side columns and then placing large fixed width images inside them. The columns will be too small for the content right from the start. You would have been better using fixed width side columns at the width of those images and just having a fluid centre. (Or make the images scale - which rarely looks good.)

The iphone scales pages to about 980px which means that the display will look much like a page at 980px will which shows the side columns overflowing the content. If you had used fixed side columns as mentioned above then it would probably look better.

You can find a few tips on developing for the iphone here.

thanks ill check out the link and ill look up something on fixed width columns. can i do something about the header? when i make the window smaller the second image moves down over the border.
ALso, the columns arent the same height though i put that container around it so the borders dont go all the way down to the footer in all the pages

Hi,

Your header isn’t clearing the floated content so add overflow:hidden to force it to encompass its children (see faq on floats for more info on clearing).

You also need to float the left image to the left otherwise ie7 will drop the right float to a new line to start with.


#head {
    padding-bottom: 10px;
    width: 100%;
    border-bottom: 4px solid #F90;
[B]    overflow:hidden;
[/B]}
.hlimg {
    padding-left: 5%;
[B]float:left;[/B]
}

Your borders won’t equalise because you don’t seem to be doing anything special to make them do that. Equal columns are very awkward and best avoided but you can find a suitable method here.

alright thanks :smiley: