Re: [css-d] Right column drooping
On Fri, Jan 7, 2011 at 2:29 PM, Kim Brooks Wei kimi@kimbwei.com 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 kimi@kimbwei.com 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:
div class=clear/div (.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/
