WordPress.org

Ready to get started?Download WordPress

Forums

CSS Trick?? (not typical 3-Col Kubrick; illustrated) (8 posts)

  1. Dgold
    Member
    Posted 8 years ago #

    On the Default Kubrick or any other fixed-width, centered theme... how could I put the entire fixed-width site in 1 div, floated left; and then put a flexible-width container to the right (like a second sidebar that flows to fill the browser resolution, floating outside the main site, even going up as high as the header if possible)?

    Can I do this in my stylesheet plus a couple new div's? Illustrated, what I want:

    Kubrick regular

    Kubrick floated left

    Kubrick with added flexible sidebar floated right on 1280px ***

    Kubrick with added flexible sidebar mashed up skinny on 1024px

    Kubrick with added flexible sidebar bumped to the bottom on 800 px

    The 3rd one is exactly what I want on my screen, while the 4th and 5th are showing you how the new sidebar would behave on smaller monitors/resolutions.

    Any CSS jedi help please?

  2. Dgold
    Member
    Posted 8 years ago #

    Anyone think this was a decent idea, crazy, waste of time, possible or impossible?

    Better yet, anyone want to whip up the magic CSS for me?

    I illustrated it, wondering what you think upon checking out the illustrations. Even if it's to tell me it's a bad idea, it represents a layout I want on a particular kind of blog I'm making. The final result is a blend of Flexible and Fixed width, and looks like this
    http://www.boomspeed.com/colbruce/kubrick-flexbar3-for1280-width400.png

    *Bump* cuz this is 3 weeks old and no reply.

  3. Doodlebee
    Member
    Posted 8 years ago #

    I think this can be done - however, I'm curious as to *why* you'd want it done. If the left-hand sidebar is to be fixed width at 760pixels, then what happens to people who are viewing the site at 800x600 resolution? Your right-hand area will be squashed to unbelievable proportions :)

    But yes, the more I think about it, the mmore I think this could easily be done - it's just a simple fluid 2-column layout, basically - with a few slight modifications. You're "sidebar" - which is actually the left-hand side - is just bigger than people usually make it ;)

    But I *would* rethink the proportions a bit, just for those viewers who are at a larger screen resolution. hoeever, if accessibility and lower resolutions are not an issue for you at all, then screw it and do what you want ;)

  4. Dgold
    Member
    Posted 8 years ago #

    thanks for your reply, 2xbee

    I illustrated the solution on 800 px monitors, and I know this is possible because I have seen other sites *complaining* that their sidebar drops below the content. In this case I *want* the flexbar to drop below the main content when the browser-window is too skinny to fit it on the right. See this example:
    http://www.boomspeed.com/colbruce/kubrick-flexbar5-for800x600-400.png

    In fact, please just check out the 5 illustrations in the 1st post, it goes thru the scenarios of different resolutions!

    Also: I know this idea might look crazy (especially to those who dislike Kubrick), but I have a reason I want to do this. If you see the type of text-content I want to put in the flexbar, it will make more sense...

    Unfortunately I wouldn't know where to start on coding the CSS, but if someone could show me how or do it for me I would return the favor in some way.

  5. Doodlebee
    Member
    Posted 8 years ago #

    Well, I'm not sure what the "Kubrick" theme CSS is (I have it, of course, but I don't use it), But since it's already made up, I'd start by pushing the "Kubrick" part to the left... find the outer wrapping div and change "margin:0 auto;" to "margin:10px;" - that'll put your 10 pixels all the way around it.

    You'll have to edit your index file and add in a secondary div...like so:

    <body>
    Kubrick layout stuff here
    </div> <!-- closing outer wrapper of Kubrick stuff -->

    <div id="right">
    right expandable content here
    </div>
    </body>

    and you'll have to add stuff to the CSS - something like this:

    #right {
    float:left;
    width:auto;
    }

    This *should* make the new div expand - but it may not. You'd have to do some playing with that to see if it does. But if the stuff inside the right container makes the div drop, it'll drop right below the current Kubrick theme layout.

    Hope that gets you started.

  6. Dgold
    Member
    Posted 8 years ago #

    I followed your first instruction perfectly, and got Kubrick scooted to the Left instead of centered, no problem.

    Then I put this in my CSS:
    #flexbar {
    float:left;
    width:auto;
    }

    (And I've tried it with both float:left and float:right)

    Here's the piece of code I'm trying to put into my Theme...
    <div id="flexbar">
    <h3>right expandable content here</h3>
    </div>

    Where should it go? I tried everywhere... in Header.php, before and after the various div's.... in Main Template... and in Footer.php. The sample/test-text appeared in various places, on top of my existing Kubrick layout, or below it... but never at the same height position & just off to the right. This is on a 1280x1024 monitor, with plenty of room for it to be to the right.

  7. Doodlebee
    Member
    Posted 8 years ago #

    Do you have a link to the site as you're working on it?

  8. Dgold
    Member
    Posted 8 years ago #

    Yes but I don't really want to show the link in public on here, so I am going to send it do dooblebee on your Contact page, ok? If you can take a look, many thanks!

    EDIT: I have sent the message on your Contact form.

Topic Closed

This topic has been closed to new replies.

About this Topic