?

Log in

Baby Snow Dragon, Kyoot

ishte in s2bloggish

width of alpha and beta

I'm having difficulty keeping my #beta from resizing whenever someone posts a huge picture on their friend's page. I know I have had this problem before with Bloggish whenever I have used beta as my entry column with the sidebar on the left (which I prefer).  I've juggled with  the Alpha and Beta settings and the only one that I seem to be able to get it consistently position in the correct place is if I set the position to absolute, and the top of the beta set to 161px (which is how tall the banner is.)  However, even if I tell it to have a right margin of 75px, with !important, I am ignored and the beta expands whenever there is a giant graphic that is bigger than what the entry width would normally be. it causes a scroll bar along the bottom, and the beta is flush with the right side when you scroll over instead of having that 75px margin.  I want it to adjust so that that margin is always viz on the right. I will set a min width probably of about 400px and if someone looks at it under that kind of rez then they can scroll around, but under normal circumstances, I don't want a scroll bar to be there just to look at the entry. I'd rather have the picture truncated.

The question is, is there a better way to do this? Is there a way for instance to say that an image may only be Xpx wide? I know that in my other Bloggish layouts I could acheive that with the sidebar on the other side, and the picture would just truncate which is what I prefer. If I want to look at some giant picture that someone didn't cut, I will happily click to their entry directly.

Any help? Thanks in advance, here is my code for this section as it is working best...
Edit: So... of course as soon as I posted this something changed and it started self adjusting, at which time I removed the top: xyzpx because it was not needed any more, and now it's working fine. go figure.


#alpha{
    min-width: 327px;
    float: left;
}

#alpha-inner{
    padding-top: 0px !important;
    padding-bottom: 20px !important;
   max-width: 225px;
}

#beta{
    background-image: url(http://i41.tinypic.com/6px3k1.png);
    position: absolute; top 161px; left 327px; right 75px;
    margin-right: 75px !important;
    padding: 15px;
    border-left: 1px solid #FFEDDB;
    border-top: 1px solid #FFEDDB;
    border-right: 1px solid #DAB58E;
    border-bottom: 1px solid #DAB58E;
}

#beta-inner{
    background-image: url(http://i43.tinypic.com/kedmcx.png);
    padding:30px !important;
    border-left: 1px solid #FAFAEE;
    border-top: 1px solid #FAFAEE;
    border-right: 1px solid #DFE098;
    border-bottom: 1px solid #DFE098;
}

Comments

I would suggest setting a max-width, or if you're not opposed to the pictures being cut off, try adding "position: relative !important; overflow: hidden !important;"?

April 2012

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     
Powered by LiveJournal.com