Home/ Questions/Q 8694907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T00:54:02+00:00

I can’t see what I’m doing wrong here. I’m working with the widths and

  • 0

I can’t see what I’m doing wrong here. I’m working with the widths and margins of a three column layout and I want to widen the right sidebar into the white space to the left.

But when I increase the width of #sidebar-right above 22%, both sidebars drop down below the content. I’m missing something having to do with the combined widths and margins.

HTML and CSS are below the image. This is also a responsive structure, if that makes a difference. I need to stay with this CSS and HTML as it is a WordPress theme, and I don’t want to move into another type of CSS column or box structure.

Update 10/23/12 I gave up on trying to adapt the current CSS and HTML and changed to box layout model CSS for page templates because the box model works well and I am able to simplify my page templates, too.

Any ideas?

enter image description here

HTML:

    <body class="three-column">

    <div id="page">
    <div id="main">
    <div id="primary">
    <div id="content" role="main">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
    </div>

    <div id="sidebar-right">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>

    <div id="sidebar-left">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
    </div>
    </div> (some closing divs omitted for clarity).

CSS:

#page {
margin: 1em auto;
max-width: 1075px;
}

#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}

.three-column #page {
max-width: 1075px;
}

.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}

.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
}

.three-column #sidebar-right {
float: right;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}

.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
margin-left: -72%;
border:1px solid #c2c2c2;
padding:10px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your issue is the -26.4% right margin on #primary and the -72% left margin on #sidebar-left.

    I’ve made a Fiddle with those adjusted; I dropped the side-bar left left margin (but kept 1.5% for padding’s sake), and adjusted #primary’s right margin to -100%.

    http://jsfiddle.net/mstauffer/CtkyN/1/

    This is still pretty darn hack-y. If there’s any way you can, you’ll have a much better experience re-working the HTML and CSS.. but if not, that fiddle will at least allow you to re-size the right sidebar as you want within this existing framework.

    Update: I don’t have credible sources, but I can explain the CSS math. In general, you’re using negative margins on #primary to lay the other two divs in areas #primary would normally occupy. Normally, the only way to make divs overlap like this would be by setting them to position: fixed or position: absolute. Because those are so hard, a layout like this would normally be accomplished with three left floats (or in the future, flexbox), but because of the order of your HTML that’s not possible.

    Instead, you’re forced to convince the CSS renderer that #primary doesn’t mind being over-laid… which you do by setting a negative margin of -100%, essentially saying, “Here, have all this space, it’s fine for you to overlap it.” Once you’ve opened up the space, you then use the left and right floats (and the width constriction) to place the sidebars in the blank spaces on either side of #content.

    I hope that helps!

    • 0