Hi. I am relatively 'new' to web development and I am currently designing my first professional website. However, I have a layout issue which is really getting on my nerves. I have two problems: 1. The background image doesn't show up. 2. The sidebars and the main content don't end at the same time (like in a table row). I am using floats, and it is really a 2 column design (one of which is split into two), and I am willing to change the structure of the webiste to get the effect I have stated here. Also, I would like to get hte main content up to the top of the HTML source code. Anyways, here the website that I am designing: www.giveawayfreebies.co.uk Thank you very much for your time. EDIT: For some reason, I couldn't post a 'live link' so to speak, so I apologise for that.
To get a bg image put in body{ background: url(images/bgimage.gif) repeat; } Code (markup): To get your site at the top of a browser put in body{ padding: 0; } Code (markup): It is very normal that you colums do not end at the same time because it are 3 seperate colums. With this method you will have to fix the height of the columns.
I have already applied a background image, the site is at the top of the browser, so that isn't the problem either. However, for some reason, I get full height columns in IE7 but not in FF3, yet there's a gap between the menu and the logo, and the multimedia does not show up on the website in IE7. So, my problems are: IE7: 1. White space between logo and horizontal menu. 2. Multimedia does not show up. FF3: 1. Full height columns does not work. 2. Background image does not show up. The problems stated here work in the other browser (e.g. the problems stated for FF3 work successfully in IE7). Please, can somebody help me? The website's www.giveawayfreebies.co.uk Have a look at my source code before anything else please.