How To Use Boxes Instead Of Tables

[joecool]

Hi all,

 

I have created a new charity website and I am trying to fix somethign on one of the pages.

 

I have content with an image beside it then a horizontal line underneath it, what is happening is depending on what browser you are using and depending at what browser you are using and other settings, sometimes the images are ending up in the line, above the line, below the line etc. I want things to stay i in places they should be no matter what browser or device they are watching it on.

 

I am not good at website design and in the old days I just used to put everything in a table and that would normally fix the issues, but this is an important charity site and I want to do everything correctly.

 

I think I need to put each section i.e. text with associated image and horizontal line into some kind of box or container system. But I am not sure.

 

Please can someone help. We launched the site on Wednesday and have just noticed this issue.

 

One of the main problem pages is:

 

(Deleted link because I didn't get a response to questions and didn't want to keep my url up here)

 

Thanks

 

Joe

Edited September 14, 2014 by joecool

[joecool]

I think I should have posted this in the beginners website design.

 

Anyway, it's in this section now. some help would be grateful received.

[Andrea]

That's too bad, I was just about to look into things, but without being able to see your page, I cannot help.

 

 

(Deleted link because I didn't get a response to questions and didn't want to keep my url up here)

[administrator]

You need to learn CSS positioning - which can be a pain ... no doubt. 

 

If anyone reading this thread, please consider learning Twitter Bootstrap:

 

http://getbootstrap.com/

 

... Once you learn it, you will be saved many hours of frustration trying to get your CSS layouts to work.

Stef

[LSW]

Just as a general rule to consider, Tables are only to be used for housing data, basically spreadsheets etc. Back in the middle ages of the 80s and 90s there was not a graphic way of placing web elements so tables were creatively misused. They did in fact limit what designers could do.

The correct way to handle this is with CSS. You can place anything anywhere you want by simply creating empty boxes and filling them with data, images, or more boxes as you like where you like and this is really the best way to do it. It can e tricky to learn, but not really hard, you simply have to get used to thinking that way and in pixels.

One benefit as well is doing so in this manner, it will leaver your source code and data cleaner. Those with disabilities will find the web site easier to navigate, including those with vision issues and search engine spiders. All your "Look and feel" elements can be placed in a separate external CSS file, separating your web site information from the web site graphical look and feel (this is what makes it better for disabilities and spyders). Also, you can then swap out the CSS file and change the look and feel of the web site with little to know changes to the actual HTML file if it is well planned and designed.

If this is an issue that needs correcting fast than Daniel's code should work. But in the long run you will want to learn CSS and eventually change the site to boxes instead of tables. But to not fear creating sites in phases. Phase one - get it up there, phase two - clean it up and improve it.