[css-d] Right column drooping
Hi People, I don't remember what will make my right column slide up to sit side by side with the left one. What am I failing to do? http://bit.ly/ad7AEl Kimi -- [ Kimi Wei thewei.com @kimiwei (t) 862.203.8814 p o box 626 fair lawn, nj 07410 ] __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Right column drooping
On Fri, Jan 7, 2011 at 2:29 PM, Kim Brooks Wei wrote: > Hi People, > > I don't remember what will make my right column slide up to sit side by > side with the left one. What am I failing to do? > > http://bit.ly/ad7AEl > > Kimi > > I assume that you want the "rightcopy" and "leftcopy" divs to be side by side? You will need to have them both in the same parent div. Right now, "leftcopy" is wrapped in the "subcopy green" div, but "rightcopy" is not. Once they are in the same container, float them both left and see how that goes. Luck! Tim -- - tim.arn...@gmail.com __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Right column drooping
On Sat, Jan 8, 2011 at 12:59 AM, Kim Brooks Wei wrote: > Hi People, > > I don't remember what will make my right column slide up to sit side by side > with the left one. What am I failing to do? > > http://bit.ly/ad7AEl > You can try Tim's suggestion, or if you don't want to change the markup, try this: #copy { margin: 0 0 2em; padding: 1em 3em 0; position: relative; } .rightcopy { margin-left: 45%; position: absolute; top: 10em; width: 45%; } ~Chetan __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Right column drooping
Tim, thanks for pointing out my structural error. I did put both columns inside the same div, where they ought to be. Floating both columns left doesn't work though because the columns won't respect the boundaries of my green box anymore. Chetan, the positioning you suggest is a good idea but 1) it only works for that page and breaks on other pages where the top of that column needs to start at a different height + 2) the rightcopy also fails to obey the boundaries of my green box. In other words, I'm still looking for the fix I need. Kimi .rightcopy { margin-left: 45%; position: absolute; top: 10em; width: 45%; } ~Chetan -- [ Kimi Wei thewei.com @kimiwei (t) 862.203.8814 p o box 626 fair lawn, nj 07410 ] __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Right column drooping
Guess I should send this to the list, not just the individual... rightcopy and leftcopy both need to be floated; either both left, or one > left and the other right. And get rid of the margin on rightcopy. > > But then the container div wont clear. Two simple ways to accomplish this. > > One way is to have a clearing div after right/left copy: > (.clear { clear: both; } ) > > The other is to apply a clearing class to the container such as the one > from OOCSS: > .clear-fix{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 > !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x > x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x > x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x > x x x x x ";} > > > Kevin > __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Right column drooping
OK, everybody, thanks for the guidance. Kevin, the clear-fix method you provided worked although the exact code you sent wasn't a fit. I found alternative code here http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/ . It works great and my page is working. BTW, clear: both didn't work although I tried several permutations of this method before reaching out to the list. Thanks again, all the best, Kimi > The other is to apply a clearing class to the container such as the one from OOCSS: .clear-fix{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:" x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";} > Kevin -- [ Kimi Wei thewei.com @kimiwei (t) 862.203.8814 p o box 626 fair lawn, nj 07410 ] __ css-discuss [cs...@lists.css-discuss.org] 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/