ChrisFlynn Posted February 26, 2008 Share Posted February 26, 2008 <html> <head> <style type="text/css"> div.superbox { border: 1px solid #000000; width: 80%; margin-left: auto; margin-right: auto; } div.subbox1 { float: left; } div.subbox2 { float: right; width: 30% } </style> </head> <body> <div class="superbox"> <div class="subbox1"> Content1 </div> <div class="subbox2"> Content2 <div>Another another</div> <div>And another</div> </div> </div> </body> </html> Within IE the content all displays within the superbox. On Firefox, it seems to 'fall out'. Any reason/workaround? Quote Link to comment Share on other sites More sharing options...
ChrisFlynn Posted February 26, 2008 Author Share Posted February 26, 2008 IE 6 = ok. Opera 9.26 = ok. Firefox 2.0.0.12 = 'fails'. Quote Link to comment Share on other sites More sharing options...
jumpenjuhosaphat Posted February 26, 2008 Share Posted February 26, 2008 Clearing both floats will help: <html> <head> <style type="text/css"> div.superbox { border: 1px solid #000000; width: 80%; margin-left: auto; margin-right: auto; } div.subbox1 { float: left; } div.subbox2 { float: right; width: 30% } </style> </head> <body> <div class="superbox"> <div class="subbox1"> Content1 </div> <div class="subbox2"> Content2 <div>Another another</div> <div>And another</div> </div> <div style="clear:both"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ChrisFlynn Posted February 26, 2008 Author Share Posted February 26, 2008 Perfect - thankyou I don't quite understand the rationale for this though - if I find anything good explanation pages I'll post them for other readers. Quote Link to comment Share on other sites More sharing options...
jumpenjuhosaphat Posted February 26, 2008 Share Posted February 26, 2008 I think - don't quote me - that the reason this happens is because in FF floated elements don't expand their containing elements, they "float" over the perimeter instead of pushing the perimeter out with it. When you clear the floats, it forces the containing element - in your case, superbox - to expand to match it's child floated elements. Quote Link to comment Share on other sites More sharing options...
ChrisFlynn Posted February 27, 2008 Author Share Posted February 27, 2008 I have a different (but related) issue now... I've got a 'middlepane' div. Within that is 'maincontainer' - which houses the content. I want 'advert' within the middlepane, on the far right. I also want the 'maincontainer' to be center of 'middlepane' (but text left aligned), but 'maincontainer' should never overlap with 'advert'. <html> <head> <style type="text/css"> div.middlepane { width: 100%; margin-left: auto; margin-right: auto; text-align: center; } div.maincontainer { padding: 5px; width: 75%; margin-left: auto; margin-right: auto; background: #EEEEEE; border: 1px solid black; } div.advert { float: right; width: 160px; } </style> </head> <body> <div class="middlepane"> <div class="advert"> <img src="images/mockad.gif" width="160" height="600" alt="advert" /> </div> <div class="maincontainer"> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> <p>This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.</p> </div> <div style="clear:both"></div> </div> </body> </html> IE understand what I mean. Firefox and Opera don't display what I mean. Quote Link to comment Share on other sites More sharing options...
haku Posted February 28, 2008 Share Posted February 28, 2008 A suggestion: You should program for firfox (or safari or opera) first, as they are standards compliants browsers, then adjust for IE afterwards, as it is not standards compliant. This will make your life a lot easier in the long run! Quote Link to comment Share on other sites More sharing options...
ChrisFlynn Posted February 28, 2008 Author Share Posted February 28, 2008 A suggestion: You should program for firfox (or safari or opera) first, as they are standards compliants browsers, then adjust for IE afterwards, as it is not standards compliant. This will make your life a lot easier in the long run! I definitely agree. It also makes you more open - I was an avid IE fan (mainly because I think FF sucks), but Opera is pretty damn good... But back to the topic - where are the standards clearly defined? It seems a strange problem given that I've expressed it in CSS as I'd explain it in natural language, yet only IE can see it. So how do I work to the standard? Quote Link to comment Share on other sites More sharing options...
haku Posted February 28, 2008 Share Posted February 28, 2008 The standards are defined here (kind of) http://www.w3.org/Style/CSS/ The W3C is the body that defines the standards for the internet. I don't know why you think firefox sucks - its faster, less buggy, and more secure than IE. It also has about a million plug-ins that you can get to customize it how you want, including the single most important plug-in that a web developer should have - firebug. I dont know how anyone creates websites without it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.