Gunlaug_Sørtun wrote in reply to Trevor Balis > trevor bayliss wrote: > >> All the columns seem to have moved right for some reason. Why is this >> happening? How can I correct it? I am learning css so I would be >> interested to hear if I am approaching this from the right angle- two >> divs for example would it have been better as divs? TIA > > http://216.219.94.105/about2.cfm > > > Apart from the mix of HTML and XHTML syntax in your mark-up... > <http://validator.w3.org/check?uri=http://216.219.94.105/about2.cfm> > ....you're doing ok, and your approach looks basically ok too. > > I can't be sure how you want that page to look and those two columns to > line up, but Firefox and Opera is presenting what I _think_ you want. > > You're experiencing a few IE/win bugs that throw parts of those columns > around a bit though. > > Add... > > #wrapper {display: inline;} > #contentinleft {display: inline;} > > ....to "kill" the 'margin-doubling on floats' bug in IE6. > > Next, delete... > > #contentinright {clear: left;} > > ....which provokes a 'float-clear' bug in all IE/win versions. > > regards > Georg
Hi Georg and Trevor I am uncertain in what Trevor is trying to achieve. Is could be either 1) having the div#contentinright clear the div#contentinleft 2) having the div#contentinright clear the div#c1 Trevor, you state that "All the columns seem to have moved right for some reason," but this does not express what is actually going wrong and in what browser. You do happen to have a left margin on #contentinleft div of 180px, is this intended? If it is the first of the scenarios (as seen in FF and Opera), then simply do as George has suggested which will kill a IE/win bug. If it is the second of the scenarios (as seen in IE), then it would be similar as this demo http://css-class.com/x/about2.htm Which has these style rules #contentinright { margin-right:-145px; margin-top : 6.5em; width : 200px; float: right; } The #contentinright can not clear the #c1 div since they belong to different parent elements and will simply overlap, so the #contentinright div must have a top margin instead, demoed with an added #contentinrightwrap with a yellow border and #contentinright with a pink border. Also a right negative margin allows the #contentinright to move far enough to the right of the #contentinleft to clear it, though IE strangely clears without the right negative margin (another bug). It took me 5 minutes to validate your xhtml ??? It's now valid xhtml and is rendering the same in IE7, FF and Opera. BTW, you have a vertical scroll appearing in IE7, couldn't work that one out, but I have added a blue border in my demo to the html element to show the problem. Kind Regards, Alan
______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
