Help - Search - Members - Calendar
Full Version: Problem in default stylesheets
Movable Type Community Forum > Other Product Discussion > Bugs and Odd Behavior
cbeck
I don't suppose this is really a bug. Not sure if it's the place to report it...

but i have noticed in all of your default stysheets your "right" div is as follows:

CODE
#right {
 float: left;
    
    
    width: 200px;
    background-color: #FFFFFF;
    
    overflow: hidden;
    }

This seems to cause a lot of problems for people as they modify things briefly and their sidebar jumps to the bottom of their posts... I'm not sure why it is not float:right.

So i just thought i would make aware if you guys hadn't noticed this. My appoligies if this is intentional and i simply don't see the reason.
TweezerMan
It is intentional.

The #center element also has a float: left; in its style. The browser will float the #center element against the margin, then float the #right element against the right side of the #center element when rendering the page. (The floats are "stacked".)

If the #right element used a float: right; instead, the browser would float the #right element against the right margin instead of against the #center element. If the browser window is wider than the combined width of the #center and #right elements, you can end up with a big empty space separating the #center and #right elements (which most people usually do not want).

The sidebar jumping down to the bottom of the page has nothing to do with this. If the browser cannot fit a floated element within the width of the surrounding container (or browser window), the browser moves the float below instead. That's just normal browser/CSS behavior.
cbeck
Hmm... ok, but being placed in an 800 px container... it should only float against the outside edge of that right? regardless of the window width i would think. The drop to the bottom problem seems to arise mostly when people add a picture that is wider than their #center. Of course, they should know better i suppose.

I guess there is still alot I don't understand about good ole CSS.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.