CSS positioning problem - how to get images on right side of text?

Question

I want to have the images on the right side of the text using CSS but at different resolutions the images overlap th etext causing big problems. I have been told that this is because everything is set to fixed widths and such and at different resolutions this causes problems.

How can I change the code to fix the problem! I am ready to give 10 points to the best answer!

Being new to css and html means that the coding is ugly adn not as efficient as other sites- things will be validated and bugs will be fixed one by one. But this is the problem I want fixed now!

http://www.geolearning.com/summit/venue.cfm

Look at the page at different resolutions- res set larger than 1048 shows the overlap.

HELP!

I am not interested in re-working the entire site- there must be a way to do this.

Answer 1

short version:
the text is determining the size of the table, not the image, and the image is displaced by the "top" command out of its normal flow. put the text in a div, and set that div to a length and height that will push down the bottom.


the problem is in main.css (line 10) this

img.floatrightvenue {
left:620px;
position:absolute;
top:515px;
}

declaring things in pixels nearly mostly defeats the purpose of CSS, try changing this to some percent. The top command is the problem also, the transitional doctype puts IE into quirks mode, you'll find that doesn't work in firefox quite the same. Then there's the CSS file itself, pick a style and run with it I'm a fan of putting each declaration on a separate line.

Other stuff:

Then there's this:

img.floatright {position:absolute; width:391; height: 371; top:525px; left:550px;}

you're missing units of measurement here. again, you should generally use percents rather than pixels, these appear to be pixels, but does the computer know that?.

this isn't necesary in #container

margin-left: auto;
margin-right: auto;

explaining specificity is a bit difficult, but there's an illustration somewhere online involving storm troopers, darth vader, and the emporer on the internet.

the last line of the file has:

background-image: url('urlhttpwww.geolearning.comsummitimages910sidebar.gif')

I'm pretty sure that's a typo.

It'd also be really nice of you to put global declarations first, then classes, then ids, it just makes it easier to read, thirdly, firefox has a really cool plugin called "firebug" that will make your life 100,000,000,000 times easier.

Also as you advance you'll find that you can do this entire layout with no TABLES and you could've done it with no javascript. You may also wish to pick up "Designing with Web Standards second edition" unfortunately, I can't presently remember the author's name.

Answer 2

IMHO (and I'm afraid you must give the 10 points to somebody else because you must assuredly won't give a hoot for my answer) you must redo the design. Tabular layout is not the way to go!

Use CSS! Define each pix with style="float: right; margin: 1em;" (plus your bordering) and, where necessary, you may need to diddle each paragraph so that you have style="clear: both;" or maybe even use what is called a spacer div between paragraphs, like this:

Answer 3

Then why don't you use percent instead of pixel for position. Or, dont use "absolute" rule. because you make the position ABSOLUTE, so the browser will stick to the rule that says "no matter how you resize the window, the item position IS absolute. browser may not adjust the position!" I'm not pro in html-based webside building, but if you need feedback, maybe i can help and you can give me the link to a sample page? (email me or put the link here)