Reputation: 17561

CSS widths and columns issue

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;
}

Upvotes: 4

Answers (8)

Nadeeja Bomiriya

Reputation: 368

EDIT:

I did a three column layout that might work for you.

HTML

<body class="three-column">
    <div id="page">
        <div id="main">
            <div id="primary">
                <div id="container">
                    <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 id="content">
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-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>
            </div>
        </div>
    </div>
</body>

CSS

#container {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 80%;
}

#sidebar-left {
    float: left;
    width: 30%;   
    min-height: 300px;
    background-color: #cccccc;
}

#sidebar-right {
    float: left;
    width: 25%;
    min-height: 300px;
    background-color: #cccccc;
}

#content { 
    float: left;
    width: 30%;
    min-height: 300px;
    background-color: #999999;
}

I also noticed that having a border cause problems for the layout. May be adding following will help to keep the border inside the div.

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

See this article.

Hope this helps.

Upvotes: 0

zmanc

Reputation: 5409

Edit: I did not see the comment that you had to stay with the same CSS. Possibly this can be used in addition to what you currently have, but if not please disregard.

If you use a row-fluid along with div spans you can scale them without having as many issues. The CSS is in fiddler.

http://jsfiddle.net/GeyHC/1/

<div class="row-fluid">
    <div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;">

        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 class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;">

        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 class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;">

        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>

Upvotes: 0

sureshunivers

Reputation: 1753

.three-column #content div is the middle content it need to have margin left as #sidebar-left div width + padding and margin right as #sidebar-right div width + padding and no need to fix the width for the middle content.

Check the sample and code.

Upvotes: 0

mehulved

Reputation: 381

Others have already given you the explanation. I just wanted to add the visual representation to make it easier to see the problem. The problem area

Upvotes: 0

Simon Dragsbæk

Reputation: 2399

Its very easy actually your very near you forgot that padding is adding to the width of your content so if you have 3 divs with 20% width and 10% margin & 10% padding on each side you would get beyond the 100% you have to move with.

Working JSfiddle here

Upvotes: 0

suiz

Reputation: 377

use this code:-

HTML

<body class="three-column">

    <div id="page">
    <div id="main">
    <div id="primary">
    <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 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>
    </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 #sidebar-left{
position:relative;
float: left;
width: 15%;
}

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

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

Upvotes: 0

Mayeenul Islam

Reputation: 4762

I think the problem is specifically here:

.three-column #content {
margin: 0 34% 0 20%;
}

margin: top right bottom left;

so you have to decrease the right margin to let the right sidebar expand.
din't try it. you better test it.

Upvotes: 0

Matt Stauffer

Reputation: 2742

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!

Upvotes: 7

CSS widths and columns issue

Answers (8)

Related Questions