Support » Themes and Templates » Image on left, main content to its right

  • I’m using the WordPress Twenty Eleven theme, and have a logo I’d like to run down the left side of the page, with the content to start to its right. It currently gives preference to the centre content, allowing the left and right space relative to the size of the browser window. The logo on the left is currently set as a background image. I want the logo on the left to have priority, and the centre content to adjust to browser size. I haven’t been able to figure out how to do that yet. Can anyone help?

    My page is at k2mgt.ca

Viewing 5 replies - 1 through 5 (of 5 total)
  • That’s kind of tricky given the existing layout of the theme. Right now you have the background image in the body tags — which is not really what you want to do — as the page will cover that when the browser window is smaller.

    Do you want the logo image to run all the way up/down the entire page (with the header, content and footer sections to the right of it) — or do you want the logo to run just below the header and above the footer (in a left sidebar section)? Those are two ways to lay it out — but the first will involve more modifying of the code of the entire page layout.

    Actually, I figured out a simple way of doing what you want — at least from what I understand of what you want. Try changing the margin in this CSS code (line 83 in style.css):

    #page {
        margin: 2em auto 2em 250px;
        max-width: 1000px;
    }

    That puts a fixed margin of 250px on the right side which keeps the main page to the right of the background logo. See if that works.

    Thread Starter nikhip

    (@nikhip)

    You are both brilliant and wonderful. Thank you so much, it’s exactly what I wanted to do!

    This seemed pretty close to what I need, but I’d like to add a little twist: is it possible to have the content aligned (more) to the right – up to a limit. If the window becomes very wide, the left margin should get fixed, and the right margin increase instead. And if the window gets very narrow, the left margin should decrease before the content becomes narrower.

    So basically I’d like to keep the left margin between a minimum and maximum value (showing e.g. at least a 200px and at most a 400px wide section of my background image to the left of the content), but not at the expense of the content.

    I’m using a child theme of the twenty twelve.

    @lii71 – please start your own thread – you are using a different theme so this one is not relevant. Modifications are very theme specific.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image on left, main content to its right’ is closed to new replies.