Background Colour And Text Wrap Problem

[Primus]

Since our IT chap left last year it has been up to me to try and keep things going on this front with very limited knowledge!My first problem is that I want the wrapper background to show a different colour to the body (edges white and inside blue) and my second is that I can't get the text in my main box to wrap around the imageProblem web pageI have added the CSS code below if you need any other information I will be more that happy to post.Cheers for looking.

#wrapper { position: relative; width: 995px; margin: 0 auto; text-lign: left; background: #0000ff; }body { background-color: #ffffff; border:0; padding: 0; margin: 0; }img { border: 0px; }input { font: normal 12px Arial,Sans-serif #000000; border: 1px solid #660000; background-color: #fff6c8;}textarea { font: normal 12px Arial,Sans-serif #0000; border: 1px solid #660000; background-color: #fff6c8; }.thinborder { border: 1px solid #000000; }/* Box Styles */.mainbox { position: absolute; left: 195px; top: 110px; width: 665px; height: 330px; background-color: #ffffff; border: 1px solid #000000; z-index:-1; text-align: right; }.maintxt { position: absolute; right: 150px; top: 150px; width: 400px; height: 285px; z-index: 2; text-align: right; }.mainred { position: absolute; right: 150px; top: 111px; width: 400px; height: 35px; z-index: 2; text-align: right; padding-right: 2px; }.mainpic { position: absolute; left: 200px; top: 110px; width: 404px; height: 330px; z-index: 3; }.discount { position: relative; left: 180px; top: 320px; width: 89px; height: 89px; z-index: 4; text-align: center; background: url('images/common/discountball.gif'); }.illustration { position: absolute; left: 370px; top: 400px; width: 200px; height: 15px; z-index: 4; }.basketpix { position: relative; left: 10px; top: 209px; width: 820px; height: 120px; z-index: 3; text-align: center; }.infobutton { position: absolute; right: 530px; top: 35px; width: 32px; height: 32px; z-index: 1; }.infolink { position: absolute; right: 420px; top: 45px; width: 100px; height: 32px; z-index: 1; }.bombutton { position: absolute; right: 530px; top: 90px; width: 32px; height: 32px; z-index: 1; }.bomlink { position: absolute; right: 380px; top: 100px; width: 140px; height: 32px; z-index: 1; }.titlesbutton { position: absolute; right: 530px; top: 145px; width: 32px; height: 32px; z-index: 1; }.titleslink { position: absolute; right: 420px; top: 155px; width: 100px; height: 32px; z-index: 1; }.comingbutton { position: absolute; right: 530px; top: 200px; width: 32px; height: 32px; z-index: 1; }.cominglink { position: absolute; right: 420px; top: 210px; width: 100px; height: 32px; z-index: 1; }.faqbutton { position: absolute; right: 530px; top: 255px; width: 32px; height: 32px; z-index: 1; }.faqlink { position: absolute; right: 420px; top: 265px; width: 100px; height: 32px; z-index: 1; }.contactbutton { position: absolute; right: 530px; top: 310px; width: 32px; height: 32px; z-index: 1; }.contactlink { position: absolute; right: 420px; top: 320px; width: 100px; height: 32px; z-index: 1; }.searchspace { position: absolute; right: 420px; top: 76px; width: 300px; height: 20px; z-index: 1; }.bottombox1 { position: absolute; left: 10px; top: 450px; width: 273px; height: 140px; background-color: #ffffff; border: 1px solid #000000; z-index: 1; }.box1red { position: absolute; left: 11px; top: 451px; width: 271px; height: 19px; z-index: 2; text-align: center; }.box1text { position: absolute; left: 110px; top: 471px; width: 173px; height: 120px; z-index: 2;}.box1pic { position: absolute; left: 15px; top: 473px; width: 90px; height: 110px; z-index: 2; text-align: center; }.bottombox2 { position: absolute; left: 298px; top: 450px; width: 273px; height: 140px; background-color: #ffffff; border: 1px solid #000000; z-index: 1; }.box2red { position: absolute; left: 299px; top: 451px; width: 271px; height: 19px; z-index: 2; text-align: center; }.box2text { position: absolute; left: 398px; top: 471px; width: 173px; height: 120px; z-index: 2;}.box2pic { position: absolute; left: 303px; top: 473px; width: 90px; height: 110px; z-index: 2; text-align: center; }.bottombox3 { position: absolute; left: 587px; top: 450px; width: 273px; height: 140px; background-color: #ffffff; border: 1px solid #000000; z-index: 1; }.box3red { position: absolute; left: 588px; top: 451px; width: 271px; height: 19px; z-index: 2; text-align: center; }.box3text { position: absolute; left: 687px; top: 471px; width: 173px; height: 120px; z-index: 2;}.box3pic { position: absolute; left: 592px; top: 473px; width: 90px; height: 110px; z-index: 2; text-align: center; }.sidebarbox { position: absolute; right: 0px; top: 110px; width: 120px; height: auto; background-color: #ffffff; border: 1px solid #000000; z-index: 1; text-align: center;}.sidebarred { position: absolute; left: 874px; top: 111px; width: 118px; height: 35px; z-index: 2; text-align: center; } .bannerad1 { position: absolute; margin: 0 auto; top: 0px; }.bannerad { position: absolute; left: 160px; top: 5px; width: 200px; height: 50px; z-index: 3; border: 1px solid #ffffff; }.bannerad2 { position: absolute; left: 645px; top: 5px; width: 200px; height: 50px; z-index: 3; border: 1px solid #ffffff; }.ppblock { position: absolute; left: 420px; top: 320px; width: 150px; height: 40px; z-index: 3; }/* Link Styles */.red21link:link,.red21link:visited { font: normal 21px Times,Serif; color: #660000; text-decoration: underline; }.red21link:hover { font: normal 21px Times,Serif; color: #cc0000; text-decoration: none; }.red15link:link,.red15link:visited { font: normal 15px Times,Serif; color: #660000; text-decoration: underline; }.red15link:hover { font: normal 15px Times,Serif; color: #cc0000; text-decoration: none; }.red12link:link,.red12link:visited { font: normal 12px Times,Serif; color: #660000; text-decoration: underline; }.red12link:hover { font: normal 12px Times,Serif; color: #cc0000; text-decoration: none; }.red10link:link,.red10link:visited { font: normal 10px Times,Serif; color: #660000; text-decoration: underline; }.red10link:hover { font: normal 10px Times,Serif; color: #cc0000; text-decoration: none; }/* No underline links */.red15nlink:link,.red15nlink:visited { font: normal 15px Times,Serif; color: #660000; text-decoration: none; }.red15nlink:hover { font: normal 15px Times,Serif; color: #cc0000; text-decoration: none; }.red15italicnlink:link,.red15italicnlink:visited { font: italic normal 15px Times,Serif; color: #660000; text-decoration: none; }.red15italicnlink:hover { font: italic normal 15px Times,Serif; color: #cc0000; text-decoration: none; }.red12italicnlink:link,.red12italicnlink:visited { font: italic normal 12px Times,Serif; color: #660000; text-decoration: none; }.red12italicnlink:hover { font: italic normal 12px Times,Serif; color: #cc0000; text-decoration: none; }.red12nlink:link,.red12nlink:visited { font: normal 12px Times,Serif; color: #660000; text-decoration: none; }.red12nlink:hover { font: normal 12px Times,Serif; color: #cc0000; text-decoration: none; }/* Font Styles */.white28discount { font: italic bold 28px Times,Serif; color: #ffffff; line-height: 24px; }.white24bold { font: bold 24px Times,Serif; color: #ffffff; }.white20bold { font: bold 20px Times,Serif; color: #ffffff; }.white20discount { font: italic bold 20px Times,Serif; color: #ffffff; line-height: 24px; }.white15bold { font: bold 15px Times,Serif; color: #ffffff; }.white14bold { font: bold 14px Times,Serif; color: #ffffff; }.red21bolditalic { font: bold italic 21px Times,Serif; color: #990000; }.red15normalitalic { font: italic normal 15px Times,Serif; color: #990000; }.red15normal { font: normal 15px Times,Serif; color: #990000; }.red15bold { font: bold 15px Times,Serif; color: #990000; }.red12bold { font: bold 12px Times,Serif; color: #990000; }.red12bolditalic { font: bold italic 12px Times,Serif; color: #990000; }.red12italic { font: italic 12px Times,Serif; color: #990000; }.red12normal { font: normal 12px Times,Serif; color: #990000; }.red10normal { font: normal 10px Times,Serif; color: #990000; }.black15italic { font: italic 15px Times,Serif; color: #000000; }.black15normal { font: normal 15px Times,Serif; color: #000000; }.black15bold { font: bold 15px Times,Serif; color: #000000; }.black12bold { font: bold 12px Times,Serif; color: #000000; }.black12italic { font: italic 12px Times,Serif; color: #000000; }.black12normal { font: normal 12px Times,Serif; color: #000000; }.black10normal { font: normal 10px Times,Serif; color: #000000; }.highlight { background-color: #ffff00; }/* Table Styles */.wtebg	{ background-color: #ffffff; }.darkbg   { background-color: #a0a0a0; }.midbg	{ background-color: #cccccc; }.yelbg		{ background-color: #cccc99; }.blknorm  { font: normal 12px Arial,Verdana,Sans-Serif; color: #000000; }.blkbold  { font: bold 12px Arial,Verdana,Sans-Serif; color: #000000; }.wtebold  { font: bold 12px Arial,Verdana,Sans-Serif; color: #ffffff; }

[dsonesuk]

(1)everything seems to be position: absolute, the #wrapper has nothing to wrap round, everything is within it own container and position, and thats why its height is 0; if you add a height to wrapper, you will start to see the background colour and border you require.but this means you will have adjust the height of the wrapper, within each individual page.(2)The simple way to stop the text going behind the image is to set the width of the text container:.abouttxt {height:265px;left:210px;position:absolute;text-align:justify;top:155px;width:470px;z-index:3;}again the image is outside the mainbox div container, and is position in place using position absolute. so text won't wrap round it unless it is inserted within the mainbox div container, and float right is used (position: absolute, left top would need removing).

[Primus]

again the image is outside the mainbox div container, and is position in place using position absolute. so text won't wrap round it unless it is inserted within the mainbox div container, and float right is used (position: absolute, left top would need removing).

Thanks for this,First two I have started to play with and seems to be working , I will have a go at moving the image into the .mainbox div container later.