CODEWITHSUNDEEP
csscss-float
Ken Palmer
Ken Palmer

Reputation: 2445

Need a CSS 3 column layout fixed-fluid-fluid

I'm having difficulty creating a 3 column layout with 3 divs. The left div needs to be a fixed width. The middle and right divs need to have fluid widths. When the browser is horizontally re-sized, the middle and right divs need to resize in a proportional manner.

I've seen some examples of 3 column fluid layouts with other fixed columns, but not for a fixed-fluid-fluid layout.

Markup to replicate my problem is below. The CSS is a little verbose, as I've been troubleshooting this. When I resize the browser the right div disappears below the horizontal line. Also, the 3 columns should take up 100% of the width of #caption_stripe, but they do not. There is about a 2-3 pixel gap that shows up on the right side.

<html>
<head>
<style>
.contentMain {
    clear: both;
    overflow: hidden;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
    position: relative;
    overflow: hidden;
    height: 37px;
    width: 100%;
    max-width: 1024px;
    font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}
#caption_subjects {
    float: left;
    height: 37px;
    background-color: #3c3d3d;
    width: 13%;
    max-width: 138px;
    min-width: 138px;
    margin: 0;
    padding: 0;
}

#caption_topics {
    float: left;
    height: 37px;
    background-color: #707070;
    width: 42%;
    max-width: 422px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
#caption_modules {
    float: left;
    height: 37px;
    background-color: #989898;
    width: 45%;
    max-width: 464px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>
<div class="contentMain">
    <div id="lessons_wrapper" style="display:block">
        <div id="caption_stripe">
            <div id="caption_subjects">SUBJECTS</div>
            <div id="caption_topics">TOPICS</div>
            <div id="caption_modules">MODULES</div>
        </div>
        <br style="clear:both;" />
    </div>
</div>
</body>
</html>

I'll also need to do this on a bigger scale with divs that will appear below this caption. For now, if I can get an example of this working, I can probably get those working as well.

Thanks for your help.

Upvotes: 0

Views: 1802

Answers (1)

kpatient
kpatient

Reputation: 26

Ok not sure why you had a % width on the first column if it is to be fixed.

But the main thing to note is, putting your fluid divs into a wrapping div. Then give your wrapper a left padding equal to the width of your fixed column.

.fluid-wrapper {
    width: 100%;
    height: 100%;
    padding-left: 100px;
}

For this to work you will need to apply box-sizing to the wrapper. This means the padding will be deducted from the inner width of your wrapper, rather than added.

Its reasonably safe to use box-sizing on all elements, which can help greatly when creating fluid/responsive designs.

*, *:after, *:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

Here is a working JSFiddle: http://jsfiddle.net/nhwGA/1/

Upvotes: 1

Related Questions