Support » Themes and Templates » CSS positioning of the sidebar looks different in every browser

  • Hello everybody, I recently made a simple WP-theme from scratch ( 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?

Viewing 1 replies (of 1 total)
  • 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%;
Viewing 1 replies (of 1 total)
  • The topic ‘CSS positioning of the sidebar looks different in every browser’ is closed to new replies.