 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / November 2004Floats, Firefox, and overflow
Example page: http://www.splatteredink.net/test/ It is a two column layout with header. The header and two columns are in a container div. The left column is floated left. The text of the left column is in a div nested within the left column div because of the box-model hack. There is another hack using margins to get the right column clear of the left one in non-IE browsers. The problem is that in Firefox 1.0 the container only extends as far down as the right column, thus the left column overflows outside the container. The layout looks fine (container extends all the way to the bottom of the left column) in Opera 7.5 and IE6. The first fix that I thought of was to use height: 100% on the container div, but this did not do anything. I then applied a float to the container div, and this made the container actually contain both columns. However, doing this made the page not centered anymore. Perhaps my question is how to center a float: left. Too bad there isn't a float: center. The reason I floated the left column instead of the right column is because it was desirable to have the unformatted HTML file's 'left column' above the 'right column'. I also wanted to avoid absolute positioning. any ideas? Should I compromise and just float the right column, or is there another answer? thank you for your time. d. Hey, What i do i use a 1 px horizontal background line picture for a whole content div. Something like that: div.centered { width: 780px; margin:0 auto 0 auto; background-image:url(../../G/layout/background_centered.gif);background-repeat:y;}You can see the results on http://ksi.mikronika.com.pl:88/mikronika/Hope it will > Example page: > [quoted text clipped - 34 lines] > > d. > Hey, You top posting. As usual, it means you didn't read OPs post. > What i do i use a 1 px horizontal background line picture for a whole > content div. OP is asking different question, and your solution is not suitable for that. His problem was that content div was not long enaugh, not that column was too short.  SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> > http://www.splatteredink.net/test/ > > The problem is that in Firefox 1.0 the container only extends as far down > as the right column, thus the left column overflows outside the container. > The layout looks fine (container extends all the way to the bottom of the > left column) in Opera 7.5 and IE6. I don't know of anything in any CSS spec that would suggest that such behavior is correct. I'm not surprised IE/Windows is doing it (probably thanks to #cont { width: 700px; }, which switches IE/Windows into using its second type of block), but I'm a little surprised about Opera. > I then applied a float to the container div, and this made the container > actually contain both columns. However, doing this made the page not > centered anymore. This works because, in CSS 2.1 terminology, a float is one of the things that establishes a new block formatting context, and the definition of 'height: auto' (the default) for such elements means they grow to contain floats. > any ideas? Should I compromise and just float the right column, or is > there another answer? Another answer would be the rule: #cont:after { display: block; content: " "; clear: both; } -David SignatureL. David Baron <URL: http://dbaron.org/ > Drue <xrintrahx@(nospam)yehoo.com> wrote in message news: > > [quoted text clipped - 6 lines] > behavior is correct. > I'm a little surprised about Opera. Quirks mode. Anyway, now it trickers standards mode in my 7.6p3, and does show things correctly (like FF). It trickers quirks in IE, I assume, because doctype has extra whitespace, > > I then applied a float to the container div, and this made the container > > actually contain both columns. However, doing this made the page not > > centered anymore. It is undefined, is could just as well not contain them... > > any ideas? Should I compromise and just float the right column, or is > > there another answer? #cont {display:table;} > Another answer would be the rule: > [quoted text clipped - 3 lines] > clear: both; > } Does it work on Gecko? It has worked on Opera for few years... SignatureLauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts> > > Another answer would be the rule: > > [quoted text clipped - 5 lines] > > Does it work on Gecko? It has worked on Opera for few years... Yes. It works in both current trunk and in 0.9.9 (the oldest version I have around, from March 2002). -David SignatureL. David Baron <URL: http://dbaron.org/ > > #cont {display:table;} Thank you both for your suggestions. Both bits of code fixed the float problem, however I ultimately went with L. David Baron's suggestion. The above code, once applied to another page, did strange things to div and p background images. Thanks again. d. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.