two-column CSS layout issue

  • I have a problem with a two-column CSS layout. I built the thing outside of WordPress and it worked fine in Firefox & Safari, but after translating it to WordPress something is fishy:

    I basically have a two column layout displayed in a centered, 735px column. The wrapper div comes first, then the sidebar (right), then the main content (left).

    Safari displays it correctly, but Firefox does not. Firefox will not float the main content next to the sidebar, instead it displays it BELOW (but still to the left) of the sidebar.

    I know I must be missing something simple, so I pasted my CSS here: https://wordpress.pastebin.ca/293076

    I would give you a link to the entire page that I built before moving to WordPress, but as it was working fine I don’t think it would help. I don’t know of a good way to show you each of my template files, so I think this will have to do. Besides, I think this is all you’ll need to see, anyway…right?

    Thanks in advance for the help, and Happy Holidays.

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

  • Actually, just the CSS is never enough because we cannot see the XHTML to which is applied.
    However, without seeing anything: if one of the elements (sidebar or content) goes down – it has always the same reason: something is wider in one of the divs than the width you allocated to them. Or the sum of the two is wider than the container.

    And as an advice: it is bad to have a right sidebar in the code BEFORE the content.

    Thread Starter kari

    (@kari)

    Now I see why it’s bad to have the right sidebar before the content. I did it that way because I thought I was supposed to. I read it somewhere (i’m figuring this stuff out as I go along).

    Could there be another issue, though, besides the width issue? I would imagine that if it were a matter of something being wider than its container, it would appear the same in all browsers. Also, I tried expanding my main container two-fold to see if it would appear properly, which of course it didn’t.

    What code would you like to see? Should I just paste each of my template files? Like I said, my measurements and everything worked fine BEFORE I imported it into WordPress (breaking it up into chunks and replacing my dummy text with wordpress tags).

    To be honest,the easiest way is to see the blog… where your theme is active ??

    Kari, having the sidebar code at the end of the HTML is mainly an accessibility / SEO issue. Generally speaking, you should have the most important content of your page first, followed by less important content.

    Thread Starter kari

    (@kari)

    I don’t want to keep my faulty blog theme active for too long. I activated it long enough to give you the source code in its entirety, posted here: https://wordpress.pastebin.ca/293507

    Can you work with this?

    Thread Starter kari

    (@kari)

    I don’t know why I didn’t do this before; here is the page: https://www.enricospada.com/cupcakeshow.html

    Please take a look and tell me what you think about this positioning problem. I really don’t understand why FireFox and only FireFox–which is supposed to be the best browser–has a problem.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘two-column CSS layout issue’ is closed to new replies.