CSS positioning of the sidebar looks different in every browser (2 posts)

  1. kennybrodebert
    Posted 3 years ago #

    Hello everybody, I recently made a simple WP-theme from scratch (www.panamapicture.de). My problem is that without CSS formatting, the sidebar will not appear on the side of the main-wrapper, but underneath it instead. So I used position:relative; and tweaked the values so it looks just fine on my primary browser (Firefox). But as it turns out, on almost every other browser (Chrome, IE, Safari), the position of the sidebar is totally off and even covering the main content.

    Can anybody give me a hint on how to put the sidebar on the desired spot, so that it will be displayed there on all browsers?

  2. Jeff Sebring
    Posted 3 years ago #

    It sounds like you need to make use of the float: property.

    Here is basically what I do for resolutions over 768px. #main wraps the content and sidebar elements:

    #main {
        position: relative;
        width: 100%;
        overflow: hidden;
    #content {
        float: left;
        width: 66.6666667%;
    #sidebar {
        float: right;
        width: 33.3333333%;

Topic Closed

This topic has been closed to new replies.

About this Topic