hi ppl, I have posted on a couple of forums and nobody has got an answer to me yet, so thought i'd give here a go and see what comes of it My design uses a 3 column design with the two outer being fixed width and the centre a auto adjusting. I have this working but there are two divs within this that house the image and content text. I need the text div to auto format aswell but i cannot get it to work at all HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script src="styleswitch.js" type="text/javascript"> </script> <link href="CSS/default.css" rel="stylesheet" type="text/css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="Contrast" href="CSS/contrast.css" /> <link rel="alternate stylesheet" type="text/css" media="screen" title="Large" href="CSS/large.css" /> </head> <body> <div id="header"> </div> <div id="style-switcher"> <form id="switchform"> <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">Default style</option> <option value="Large">Large Font</option> <option value="Contrast">High Constrast</option> </select> </form> </div> <div id="content"> <div id="content-left"> <a href="index.html">Home</a><br /> About<br />News<br />Dates<br />Admissions<br />Successes<br />Microsoft Academy<br />Email<br />Contact Us<br />Links </div> <div id="content-right"> <div id="search"> <h2>Google Search</h2> <form id="form1" name="form1" method="post" action=""> <input name="textfield" type="text" size="15" /> <input type="submit" name="Submit" value="Go" /> </form> </div> <div id="prospectus"> <h2>Prospectus</h2> School Prospectus (PDF) <br /> Sixthform Prospectus (PDF)</h2> </div> <div id="newsletter"> <div> <h2>Newsletter</h2> </div> <div class="newsletter1">Newsletter (PDF)</div> <div class="newsletter2">Newsletters can be viewed by using a version of Adobe Reader</div> <div class="newsletter3"> <a href="http://www.adobe.com/uk/products/acrobat/readstep2.html"><img src="images/get_adobe_reader.gif" alt="Download the latest version of Adobe Reader" width="82" height="29" border="0" /></a></div> </div> <div id="links"> <h2>Useful Links</h2> Wolverhampton Engage<br /> Virtual Workspace<br /> My I-Plan<br /> OFSTED</h2> </div> </div> <div id="content-main"> <div class="main-content"> <div id="content-main-images"></div> <div id="content-main-content"></div> </div> </div> </div> <div id="wrapper"> <div id="footer"><a href="index.html">Home</a> | About | Contact Us | Accessibility</div> </div> </body> </html> Code (markup): CSS a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #00CCFF; } a:active { text-decoration: none; color: #000000; } body { font-family:arial,helvetica,sans-serif; font-size:12px; } #header { border:1px solid #bbb; height:80px; padding:10px; font-family: Arial, Helvetica, sans-serif; margin-bottom:10px; min-width:500px; font-size: 10px; } #style-switcher { padding:5px; margin-top:10px; margin-bottom:10px; border:1px solid #bbb; text-align:right; background-color:#0099FF; } #content { float:left; width:100%; } #wrapper { float:left; left:0; width:100%; min-width:500px; margin-top:10px; } #content-left { float:left; padding:10px; line-height:20px; width:130px; border:1px solid #bbb; margin-right:10px; } #content-right { float:right; width:150px; border:1px solid #bbb; } #search { margin:5px 5px 5px 5px; border:1px solid #bbb; } .searchbox { font-size:11px; line-height:18px; } .header { border-bottom:1px solid #bbb; text-align:center; font-size:12px; line-height:18px; background-color:#0099FF; color:#FFFFFF } #prospectus { margin:5px 5px 5px 5px; border:1px solid #bbb; line-height:18px; font-size:11px; } #newsletter { margin:5px 5px 5px 5px; border:1px solid #bbb; } .newsletter1 { font-size:11px; line-height:18px; border-bottom:1px solid #bbb; } .newsletter2 { font-size:10px; } .newsletter3 { margin-top:5px; margin-bottom:5px; text-align:center; } #links { margin:5px 5px 5px 5px; border:1px solid #bbb; font-size:11px; line-height:18px; } .links { font-size:11px; line-height:18px; padding-left:5px; padding-right:5px; } #content-main { height:325px; padding:10px; border:1px solid #bbb; margin-left:165px; margin-right:165px; } #content-main-content { float:left; margin-right:10px; } #content-main-images { float:left; width:120px; height:300px; border:1px solid #bbb; margin-right:10px; } #footer { padding:5px; border:1px solid #bbb; text-align:right; background-color:#0099FF; } h2 { top:0; font-size:12px; text-align:center; background-color:#0099FF; color:#FFFFFF; font:Arial, Helvetica, sans-serif; margin-top:0em; margin-bottom:0em; font-weight:normal; } form { margin-top:5px; margin-bottom:5px; margin-left:2px; } input { font-size:11px; } .main-content { float:left; width:100%; } Code (markup):
the conten-main-content is the div that needs to be auto fitting! I have tried 100% but it places the div under the other div
By auto-format do you mean to automatically fit the width of the screen, or that the contents of that div are formated in a specific way (such as text color, ect)?
auto adjust to the page and not the content! Their is already an auto adjusting div that content-main-content is inside, but there is also a div for some images in their too but i want that to stay the same width but allow content-main-content to auto fit the gap
Okay. I just need to make sure I understand what you want, relative to your current code. You want content-main to fill the entire gap, and then content-main-content to fill it's parent content-main completely, correct? The way it seems to me that you are currently attempting to get this to work is to first float content-left to the left, content right to the right, and then have content-main come up between the two. Have you tried using a div that in the CSS has the attribute "clear: both;" after your content div?
Thanks for the reply! I have never used the Clear:both; tag before. I have read into this a little but its a little confusing. Should this tag be used in content-main div?
if the site serves me correct info, its used for clearing floating methods next to elements! How could i use this to get my desired effect?
Just taking a quick glance at this, but for starters you're using XHTML rather than HTML. Make sure your event handlers (onClick for instance) are in lower-case (as in onclick), as well as your XHTML elements and attributes. Not only that, but you're also going to want to learn how to code using semantic (X)HTML as well. I'll see what I can do for you in the morning as far as a solution goes.