Spawny

OK idiot that i am, i just tested it with the relative positioning instead of the adsolute and all's well. Thanks for the help though!!!

Thanks for that Scott, its exactly what i need, and works fine on your page, but when i try to do this on my page, it still defaults to the text behind the div. It seems to be ignoring the float.

Hi All,i'm trying to float a div box to the right inside another div. I'd like the text inside the 'centrecontent' div to flow around the 'carpbox' div. Is this possible?CSS .centrecontent{position: absolute;float:left;background:#fafafa;overflow: visible;top: 0px; left:15%; height: 100%; width: 62%;min-height:100%;font-size: 10pt; color: black;line-height: 16pt;padding: 5px 40px;text-align: left; font-family: Verdana,Tahoma,sans-serif;border: thin 1px black;margin-bottom:2px;}html>body .centrecontent{height:auto;}.carpbox { position: absolute; float: right; border-style: solid; border-width:2px; background-color: darkkhaki; border-color:#000000; top: 10%; left: 50%; height: 250px; width: 300px; padding:10px; } I then just enclose the carpbox div inside the centrecontent div. The problem is that it doesn't flow, and the carpbox div sits on top of the text.I intend to put RSS feeds in the carpbox div eventually.

Well i'll not bother posting here again, luckily i managed to see the problem, the CSS file referenced was the wrong one, but out of the two posts i've put up so far i've had the grand total of.....wait for it.......0 replies.

Hi All,i'm struggling with a difference in firefox and IE. I have two sidebars either side a main text box. I want the sidebars to be fixed and 100% of the screen, but the main text box to scroll to fit. It works fine in IE but Firefox stops at different stages. Neither is in a containing DIV and i can't work it out....you can see it herehttp://www.euinvest.ie/scsi/clients.htm body{background: gainsboro;}ul{list-style:circle; margin:15px 0 20px 0; font-size:0.9em;}li{margin:0 0 8px 25px;}a{color:#d85d5d; font-weight:bold; text-decoration:none;}a:hover{color:#505050; text-decoration:underline;}img{margin:0px 15px 0 0; padding:1px; background:#ffffff; border:1px solid #d0d0d0;}a img{border-color:#d85d5d;}a img:hover{background:#d85d5d; border-color:#d85d5d;}/**************** Sidebar area styles ****************/.sidebar{position: static; top:0; left:0; width:190px; height:100%; background:darkkhaki; text-align:right;margin:0 0 18px 0; color:#606060; font-size:0.8em; overflow:auto;}#rightsidebar{position: static; top: 0px; left: 590px; width: 200px; padding: 5px; border: 2px solid #c0c0c0;overflow: auto; color: #606060; background: darkkhaki; text-align: left; font: 76% Verdana, Tahoma, sans-serif;line-height: 8pt; font-size: 1.1em; font-weight: normal;}label,input { display: block; width: 100px; float: left; margin-bottom: 5px; margin-left: 30px; margin-top: 10px; line-height:8pt;}label { text-align: left; margin-left: 10px; width: 75px;}br { clear: left;}/**************** Navigation menu styles ****************/#menu a{display:block; width:172px; padding:5px 18px 5px 0; color:#606060; background:darkkhaki; font-size:1.8em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}#menu a:hover {color:#303030; background:olivedrab;}#menu a.active{padding:5px 18px 5px 0; background:white; border-top:2px solid #c0c0c0; border-bottom:2px solid #c0c0c0;}#menu a.active:hover{color:#505050; background:white;}/**************** Content area styles ****************/.right{float: right;padding: 10px;}.left{float: left;} hr { border: 1px; width: 80%; color: silver; background-color: silver; height: 1px;}.maintextbox {position: absolute;overflow: auto;float:left;background:#fafafa;top: 0px; left:190px; height: 800px; width: 320px;font-size: 10pt; color: black;line-height: 16pt;padding: 40px;text-align: left; font-family: Verdana,Tahoma,sans-serif;}

test site for workHi all i'm struggling trying to get my IE and firefox browsers to show the same output. The unordered list sits just right for my buttons in IE but extends in firefox out of the container. Can anyone help?<html><head><style type="text/css">body{ background: white; }h1 {color: red; font-size: 8pt; text-align: left; font-family: arial; margin-left: 6px;}.left{float: left;}.right{float: right;}.logo {position:absolute;background-color: white;top: 8px; left: 8px; width: 220px; height: 213px; z-index:1;padding: 0px;font-size: 10pt; color: black;text-align: left; font-family: arial;}.searchheader {position:absolute;background-color: darkkhaki;top: 38px; left: 245px; width: 282px; height: 36px; z-index:1;padding: 4px;font-size: 10pt; color: white;font-variant: small-caps;font-weight: bold;border-style: solid;border-width:1px;border-color:#000000;text-align: left; font-family: arial;}.searchbox {position: absolute;top: 74px; left: 246px; width: 279px; height: 118px; padding: 4px;font-size: 9pt; color: black;font-variant: small-caps;font-weight:bold;text-align: center; font-family: arial;background-color: ivory;}.offerheader {position:absolute;background-color: darkkhaki;top: 38px; left: 529px; width: 278px; height: 36px; z-index:1;padding: 4px;font-size: 10pt; color: white;font-variant: small-caps;font-weight: bold;border-style: solid;border-width:1px;border-color:#000000;text-align: left; font-family: arial;}.offerbox {position: absolute;top: 74px; left: 530px; width: 277px; height: 118px; padding: 4px;font-size: 10pt; color: black;text-align: left; font-family: arial;background-color: ivory;}.sidebar {position: absolute;background-color: darkkhaki;top: 225px; left: 8px; width: 91px; height: 520px;font-size: 10pt; color: white;text-align: center;border-style: solid;border-width:1px;border-color:#000000;padding: 4px;text-align: left; font-family: arial;z-index: 1;}.maintext {position: absolute;background-color: ivory;top: 225px;left: 104px; height: 520px; width: 366px;}.topbar {position: absolute;background-color: black;top: 8px; left: 172px; height: 136px; width: 624px; z-index:-1} .xerver {position: absolute;background-color: #CCCCCC;border-style: solid;border-width:1px;border-color:#000000;top: 152px; left: 696px; height: 32px; width: 80px; z-index:1}.maintextbox {position: absolute;float:left;top: 240px; left:120px; height: 520px; width: 344px;font-size: 10pt; color: black;padding: 4px;text-align: justify; font-family: arial;overflow: scroll;}.advertbar1 {position: absolute;top: 8px; left: 4px; width: 79px; height: 150px; padding: 2px;font-size: 10pt; color: white;text-align: center;font-variant: small-caps;font-weight: bold;border: none;text-align: left; font-family: arial;}.advertbar2 {position: absolute;top: 165px; left: 4px; width: 78px; height: 150px; padding: 2px;font-size: 10pt; color: white;text-align: center;font-variant: small-caps;font-weight: bold;border: none;text-align: left; font-family: arial;}.advertbar3 {position: absolute;top: 322px; left: 4px; width: 78px; height: 150px; padding: 2px;font-size: 10pt; color: white;text-align: center;font-variant: small-caps;font-weight: bold;border: none;text-align: left; font-family: arial;}.rightbackgroundbox { position: absolute; top: 221px; left: 0px; width: 810px; height: 100%; background-color: darkkhaki;}.testimoniallogo { position: absolute; top: 224px; left: 485px; width: 90px; height: 45px; padding: 2px; font-size: 10pt; color: black; background-color: ivory; text-align: left; font-family: arial; border: 1px solid; border-color: black; z-index: 1;}.testimonial { position: absolute; top: 224px; left: 534px; width: 272px; height: 119px; padding: 4px; font-size: 10pt; color: black; border: 1px solid; background-color: white; text-align: left; font-family: arial;}.testimoniallogo1 { position: absolute; top: 355px; left: 485px; width: 90px; height: 55px; padding: 2px; font-size: 10pt; color: black; background-color: ivory; text-align: left; font-family: arial; border: 1px solid; border-color: black; z-index: 1;}.testimonial1 { position: absolute; top: 355px; left: 534px; width: 272px; height: 121px; padding: 4px; font-size: 10pt; color: black; border: 1px solid; background-color: white; text-align: left; font-family: arial;}.testimoniallogo2 {position: absolute;top: 492px; left: 485px; width: 90px; height: 70px; padding: 2px;font-size: 10pt; color: black;background-color: ivory;border: 1px solid;border-color: black;z-index: 1;text-align: left; font-family: arial;}.testimonial2 {position: absolute;top: 492px; left: 534px; width: 274px; height: 120px; font-size: 10pt; color: black;background-color: white;padding: 4px;border: 1px solid;text-align: left; font-family: arial;}.testimoniallogo3 { position: absolute; top: 625px; left: 483px; width: 92px; height: 75px; padding: 2px; font-size: 10pt; color: black; background-color: ivory; border: 1px solid; border-color: black; text-align: left; font-family: arial; z-index: 1;}.testimonial3 {position: absolute;top: 625px; left: 535px; width: 274px; height: 120px; padding: 4px;font-size: 10pt; color: black;background-color: white;border: 1px solid;text-align: left; font-family: arial;}.testimoniallogo4 {position: absolute;top: 736px; left: 485px; width: 98px; height: 120px; padding: 4px;font-size: 10pt; color: black;text-align: left; font-family: arial;}.testimonial4 {position: absolute;top: 736px; left: 584px; width: 232px; height: 120px; padding: 4px;font-size: 10pt; color: black;border: 1px solid;text-align: left; font-family: arial;}ul { position:absolute; float:left; top: 190px; left: 246px; padding:0; margin:0; list-style-type:none; z-index: 1;}a {float: left;width: 94px;height: 30px;text-decoration: none;font-size: 8pt; color: white;font-variant: small-caps;font-weight: bold;color: white;background-color: darkkhaki;padding: 0.4em 0.6em;border: 1px solid black;}a:hover {background-color: darkolivegreen}li {display:inline}img {float:left;}</style><script language="JavaScript" type="text/JavaScript"><!--function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0;}//--></script></head><body><div class="logo"><img src= "scsi1.gif"><h1> Spanish Computer Services and Installations S.LMadrid</h1></div><ul><li><a href="#">Services</a></li><li><a href="#">About us</a></li><li><a href="#">Clients</a></li><li><a href="#">Products</a></li><li><a href="#">Design</a></li><li><a href="#">Work for us</a></li></ul><div class="searchbox"><div class="left"></div><p><span class="left"> <select name="Bymanuf" onchange="MM_jumpMenu('parent', this, 0)"> <option>HP</option> <option>Cisco</option> <option>Brocade</option> <option>Sun</option> <option>More...</option> </select></span></p><p>By Manufacturer</p><p><span class="left"> <select name="Searchbyproduct" onChange="MM_jumpMenu('parent', this, 0)"> <option>Router</option> <option>Server</option> <option>Switch</option> <option>Network</option> <option>Backups</option> </select></span></p><p>By Product</p><div class="left"></div></div><div class="searchheader">search</div><div class="offerbox"><img src="animated Offers.gif"></div><div class="offerheader">Latest Offer</div><div class="rightbackgroundbox"></div><div class="testimoniallogo"><img src= "quantum.gif"></div><div class="testimonial"> <p> </p> <p> </p> <p>Testimonial from Quantum </p></div><div class="testimoniallogo1"><img src= "sun1.jpg"></div><div class="testimonial1"> <p> </p> <p> </p> <p>Testimonial from SUN </p></div><div class="testimoniallogo2"><img src="telef_3.jpg"></div><div class="testimonial2"> <p> </p> <p> </p> <p>Testimonial from Telefonica </p></div><div class="testimoniallogo3"><img src="hp_logo.gif" width="80" height="66"></div><div class="testimonial3"><p> </p><p> </p><p>OOOOOOO Peter can you feel it in the air, Barca, Barca, Come on Barca!!!! </p></div><div class="sidebar"><div class="advertbar1"><img src="cisco%20Logo%20sm.gif" width="70" height="58"><img src="cisco_router.jpg" alt="Click here for offers" width="71" height="40">Cisco routers from €600</div><div class="advertbar2"><img src="brocade_logo.gif" width="70" height="46"><img src="brocadeswitch.jpg" alt="Click here for offers" width="70" height="46">Brocade switches from €300</div><div class="advertbar3"><img src="hp_logo_sm.gif" width="70" height="58"><img src="hpserver.jpg" alt="Click here for offers" width="71" height="71">HP Servers from €400</div></div><div class="maintext"></div><div class="maintextbox"><img src="rich_port_opt.jpg" width="108" height="83" border: solid #0000FF />If you can keep your head when all about youAre losing theirs and blaming it on you,If you can trust yourself when all men doubt youBut make allowance for their doubting too,If you can wait and not be tired by waiting,Or being lied about, don't deal in lies,Or being hated, don't give way to hating,And yet don't look too good, nor talk too wise:If you can dream--and not make dreams your master,If you can think--and not make thoughts your aim;If you can meet with Triumph and DisasterAnd treat those two impostors just the same;If you can bear to hear the truth you've spokenTwisted by knaves to make a trap for fools,Or watch the things you gave your life to, broken,And stoop and build 'em up with worn-out tools:If you can make one heap of all your winningsAnd risk it all on one turn of pitch-and-toss,And lose, and start again at your beginningsAnd never breath a word about your loss;If you can force your heart and nerve and sinewTo serve your turn long after they are gone,And so hold on when there is nothing in youExcept the Will which says to them: "Hold on!"If you can talk with crowds and keep your virtue,Or walk with kings--nor lose the common touch,If neither foes nor loving friends can hurt you;If all men count with you, but none too much,If you can fill the unforgiving minuteWith sixty seconds' worth of distance run,Yours is the Earth and everything that's in it,And--which is more--you'll be a Man, my son!</div></body></html>

Hi there, that kind of works but the boxes sit on different lines. I want them to horizontally align.

Hi Lads and lasses, i'm getting to grips with CSS slowly and having some great results, but i'm trying now to position 2 jump menus inside an element/box. When i put them in, they position by default on the left of the box (i want them on the base of the box left and right). It also expands the box and throws the dimensions out. <div class="searchbox">By Productsearch <form name="form1"> <select name="Searchbyproduct" onChange="MM_jumpMenu('parent',this,0)"> <option>Router</option> <option>Server</option> <option>Switch</option> <option>Network</option> <option>Backups</option> </select></form><form name="form2"> <select name="Bymanuf" onChange="MM_jumpMenu('parent',this,0)"> <option>HP</option> <option>Cisco</option> <option>Brocade</option> <option>Sun</option> <option>More...</option> </select></form></div> Any help would be greatly appreciated. I'd also appreciate knowing how you position text around an element like these.