Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Is it legal / OK to combine fixed and float?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 23, 2011 at 2:34 pm #31748
    lunelson
    Member

    So, I tried googling this thoroughly but it seems it’s unusual. I mocked up a file with some dummy divs and inline styles to demonstrate it. Basically I’ve got 3 columns, by way of nesting and floating, and I want to fix the first of the three so it stays positioned vertically as we scroll: a fixed sidebar. However the whole thing is nested inside a horizontally centred div (left/right margins = 0), and I want that column to stay with the other two horizontally speaking i.e. if the user resizes the window.

    What I stumbled across was floating the first column left, and then applying position: fixed. You can see it in the source.

    Is this legal? it seems to work in every browser except IE 6 on Windows (which is fine with me); Firefox, Chrome and Safari all seem to buy it.

    Here’s a link to the page

    February 23, 2011 at 11:34 pm #58658
    chrisburton
    Participant

    Lol, what do you mean is it legal? I doubt you’ll serve 20 to life for it, if that’s what you’re asking.

    February 24, 2011 at 5:25 am #58633
    lunelson
    Member

    Yes, ok ;) What mean is, can anyone see a reason why I shouldn’t use it? I’ve never seen this in any description of standard practice CSS positioning, but it’s doing what I want it to. The next step is to try to make it work with something like the jquery floating menu approach here, which was linked to from this CSS-Tricks article… I can’t figure out what I need to change to make it work with my setup nor how to change the syntax of the scripting so it will execute in Tumblr

    February 24, 2011 at 8:15 am #58520
    chrisburton
    Participant

    I’m not sure about Tumblr as I do not use it. But what exactly are you having trouble with using the jQuery plugin? If you look at the source code, it shows exactly how to accomplish this. Link

    I would just copy this, change the file paths as necessary and tinker with it until you get the result you want.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.