Fixed Width Sidebar (Flexible Content)

  • I have finally decided to try and do a fluid width theme, but I am running in to a small problem.

    I would like the main part of the theme to be 90% wide including the sidebar, but I would like the sidebar to be a fixed number of pixels wide.

    I see this style on a lot of sites (like Digg). After combing through thiir page code I still cant find out how to do this.

    I thought this kind of theme would be easy, but I am having some problems getting it to work.

Viewing 6 replies - 1 through 6 (of 6 total)

  • You’d have to wade through the CSS as well as the page code to see *exactly* what they’re doing.

    Just two columns?

    Have you have a fixed width sidebar and “auto” specified for width of the main content?

    You’d also have to play around with margins etc.

    Thread Starter neoian2

    (@neoian2)

    Man… this is giving me a headache. lol

    You could put this in the body element:

    min-width:779px;
    max-width:1003px;

    Then you could give your wrap which includes header, sidebar and maincontent a width of 90%.

    Sidebar then gets set at 200px or whatever you have in mind, and the content area can be set width:auto;.

    Then in header.php you’ll have to use a conditional comment to cover the world’s most broken browser:

    <!--[if IE]>
    <style type="text/css">
    body { width expression(document.body.clientWidth > 1003 ? "1003px" : "779px"); }
    </style>
    <![endif]-->

    I haven’t done this specifically, but it should work with minor tweaks, or at least give you a starting point.

    Welcome to web design!

    Probably any change you make is going to look like trodden -on iguana poo because there will be something else you need to change to make the first change work, so be sure to let us know how it’s going, and if you want to show us what you’ve achieved then it would probably help.

    I find the easiest way to do this is to set the sidebar to an absolute position — while of course giving a fixed width for it, then make sure your content ‘column’ provides enough margin or padding that accounts for where the sidebar is placed.

    I’m trying out this theme right now, https://www.plaintxt.org/themes/barthelme/ version 4.1

    The test page is here: https://themes.wordpress.net/columns/2-columns/107/barthelme-101/

    The sidebar is really cramped, is there a way to widen it to at least 250px? Will widening it hurt other areas?

    I’m new to wordpress.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fixed Width Sidebar (Flexible Content)’ is closed to new replies.