CODEWITHSUNDEEP
cssfluid-layout
Kim
Kim

Reputation: 1175

fluid-fluid-fluid three columns

Is it possible to have 3 columns, all equal in width with 2 columns in between, all be fluid? Everything I can find shows one column fixed, or they have different width. I need them all to be the same. No matter what I do on this page, the last li doesn't come all the way to the edge of the container. If I enlarge the % of the li then it doesn't fit in smaller resolutions. Thanks!

Page example is here

CSS is here

Upvotes: 1

Views: 170

Answers (4)

Todd Medema
Todd Medema

Reputation: 33

It looks like you already got an answer on how to get it working, but you'll quickly run into another problem if you're going to have any sort of margin or border on these columns.

Those width percentages? They don't include border/margin - so if you add either of those, you'll once again have columns overflow.

Solution? Make sure to set box-sizing: border-box; - if you haven't heard of it before, Google it. It's magical!

Upvotes: 3

El Kabong
El Kabong

Reputation: 717

If you want to bring the last li out add:

#categories-wrapper ul li.students{
    float: right;
}

#categories-wrapper ul li.fine-art{
        float:left;
}

replace categories-wrapper ul li:nth-child(2) with:

#categories-wrapper ul li.gd {
margin-left: 4.25%; /* 36px / 960px */
    float: left;

}

And modify this:

#categories-wrapper ul li {
    width: 30.20833%; /* 290 / 960 */
    border: 1px solid #333;
    position: relative;
    }

Is that what you're looking for?

Upvotes: 0

Matt K
Matt K

Reputation: 6708

I would say it's all about calculating the right percentages.

To start fresh, remove the borders and margins on all three columns. Then make their widths 33.3333% so they will all fit perfectly inside their container.

Looking at your CSS I can see you have a margin (left and right) of 3.75% on the middle column, so you must re-calculate your column widths to 100 - (3.75 * 2) / 3 = 30.833333%.

Secondly, switch your border to an outline to prevent unnecessary width being added to your layout.

Lastly make your imgs 100% width so they fit inside their containers nicely.

Should be done after that, I used Firebug to perform all those changes on your site and it looks like it worked out.

Upvotes: 0

Nate
Nate

Reputation: 4958

your question puzzles me a bit. On the one hand, this example shows what you sound like you're asking for:

http://jsfiddle.net/JuamW/

On the other hand, the actual example of your site shows a fixed-width situation where your columns have no requirement to be fluid. If the above example doesn't give you what you need, could you provide some more context?

Upvotes: 1

Related Questions