HTML/CSS page size problem

[zenoah]

Hi,

I'm have a XHTML page that has problems with text boxes sitting outside of a main image boundary. The browser window should be able to be resized to fit the background image without scroll bars showing. Instead the text boxes create blank areas outside the image making the scroll bars appear.

The link to the css and xhtml file is below.

Nobody so far can think of a fix.


Thanks,
Anthony

http://db.tt/EUwW2cdf

[chrishirst]

I'm have a XHTML page that has problems with text boxes sitting outside of a main image boundary.

Clear your floats.

http://www.quirksmode.org/css/clearing.html

[zenoah]

Any chance you could expand on that.

Possible example with the code i have?


Thanks

[chrishirst]

http://css.maxdesign.com.au/floatutorial/

Floats exist in a plane that is outside of the document flow, where only the content area of the W3c box model is in the normal flow, but the other box components are allowed to 'break out' of the parent container and occupy their 'normal' positions and space.

There are a few ways of preventing this, one is explained in detail in the Quirksmode article the others are:
A: give the last element in the float plane a (clear:left; | right; | bothclear property value that closes the float plane and restores the document flow after the parent element.

B: add an empty "clearing element" usually a line break (<br>) that has the appropriate clear setting (as above).

[chrishirst]

Oh! And by the way, I don't "spoon feed" code to questions that are about the fundamentals of web development using HTML & CSS.
I always presume you have asked because you want to learn what has caused the issue and how to avoid it in the future.
So I show you where you can read explanations and where you can learn the solution for yourself. This is how I aquired my knowledge of CSS, and why I am now on the other side of the equation, answering the questions rather than asking them.

And that is not arrogance or being 'big-headed", it is a simple fact.

[chrishirst]

A rule applied to the ID of an element will override later rules that only apply to the classname.