CSS/html issue help

[oral]

I want to float 2 Uls to the right and have the

wrap around them,

Also not only are the paragraphs and headders not wrapping they are going off the page.

here is the CSS and a link to the page http://www.mindbeyondbounds.com/foodlist.html

 

h1,h2,h3 {padding:7px 0 10px 0px;

text-align:center; /**********only on this page the centering dose not work*******/

color:rgb(17,18,68);

}

 

p {padding:0px 20px 7px 7px;

 

}

 

 

 

 

#centerDoc ul {

font-size:9pt;

font-family:"Trebuchet MS", Arial, Helvetica;

padding: 0 1px 0px 0px;

list-style: none;

border: 1px solid #CCCCCC;

margin:10px 0 0 0;

width:235px;

background:rgb(255,255,223);

float:right; /*******it floats but the paragraphs do not wrap******/

}

 

 

#centerDoc li {

margin:0px 0px 0px 5px;

 

}

[Andrea]

For starters, use HTML strict doctype, not XHTML.

 

tags (header tags) have semantic meaning - so

is the most important header on your site,

the second most important, and so forth. So starting with

makes no logical or semantical sense.

 

The reason your

s aren't wrapping is that you're putting 38 (didn't really count) letters in a row - things wrap where there are spaces.

 

If your background is just a color (better to use Hex than color names - so don't use 'white' - use #FFF), no need to repeat x or y or whatever - color is color - all over your background.

 

Unfloat everything but the uls - and drop the pos relative for your container.

 

Try all that and see what happens with a more realistic (SPACES) content in our p and h tags.

[oral]

Thank you