We help IT Professionals succeed at work.

HTML layout and display problems

Jacob Lepley
Jacob Lepley asked
Hi experts and thanks in advance for you help.
I am trying to build a professional small business website. I have built websites before but none that I gotten paid for. So bottom line is I need a good site layout that works cross platforms. I like using css and divs to create the layout, and I am using dreamweaver to code. My issue is the screen looks different in IE and Firefox. In Firefox everything looks good except the footer. In IE the main content area is off. I am attaching my files, please have a look at the code and let me know what I am doing wrong.

I would also like it if you could tell me if my layout is a good design or if I should go with a different layout. Thank you.
Watch Question

This would be easier to look at if you published it somewhere.

There are several web hosts that allow you to publish simple pages for free.  I use www.tekcities.com

My tekcities sandbox is
Jacob LepleyBusiness Systems Programming Analyst


I didn't want to publish my site until I had some major content. I am registered with Ipage but haven't figured out how to publish yet and if it's simple to stop publishing. I will see what I can do.
Jacob LepleyBusiness Systems Programming Analyst


ok you should be able to access it @ http://tradingpostjn.com/
For starters, I suggest you don't publish your e-mail address.  Spam harvesters will grab it and you'll start getting lots of spam.

For now, I suggest you remove it.  Later, I'd create a contact form and have a CGI process the form and send you e-mail that way.  A CGI can be written in C/C++, PHP, Perl and Python, to mention a few.
What are you trying to do with the footer?  Put it inside the main area?
Try changing the sides to 165px width and see if that looks better in IE.
You have more </div>'s than <divs> in your file.

I suggest you use the following validator


To view the errors on your page

Also, you should have an alt tag for your image.
Jacob LepleyBusiness Systems Programming Analyst


Ok so I found the lingering </div> which fixed the footer problem. Deleted the email, good idea thanks. I changed the left and right sidebar width to 165 which looks good in IE but now its messed up in firefox. If I have the left-sidebar floating left and right sidebar floating right, isn't there a way to make the main content expand automatically to fit in between the two?

Also do you notice a delay in loading the image? Could that because its a png. its 731kb which doesn't seem that big
I didn't see a delay.

Take a look at my CSS.  It works in FF and other browsers.


I don't set a width for the center.  Instead, I set margins.
Jacob LepleyBusiness Systems Programming Analyst


I don't know I can't seem to get margins to work properly.
OK, can you either send me a zip file of what you have now or update your website?
Jacob LepleyBusiness Systems Programming Analyst


It's updated however, I pretty much gave up on the way I had it layed out and instead used a Dreamweaver template that worked pretty well. You can still have a look but I think I am good for now. Appreciate your help.
That works.

I suggest you put some actual text in the alt tag such as

<a href="#"><img src="images/tradingpostwithbulletWithoutshadow.png" alt="Trading Post Logo" width="962" height="208" id="Insert_logo" style="background: #C6D580; display:block;" /></a>

I suggest you also put text in your existing title tag
<title>Trading Post : Home Page</title>
Jacob LepleyBusiness Systems Programming Analyst


Thank you for your help. You experts Rock!!!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.