CODEWITHSUNDEEP
htmlcss
Patrick Reck
Patrick Reck

Reputation: 11374

3 columns layout: fixed width, varying width, fill the remaining

I am creating a menu where I will have 3 columns. First one has a fixed width, third one have a varying width and the second one should fill the remaining space.

Illustration

So, I am facing two problems. First is, how do I get the middle box to fill the remaining space? and second, how do I get the links to stand next to each other with no fixed width?

Here is a code example.

<div id="menu">
    <div id="left">I am fixed</div>

    <div id="middle">
        <input type="text" id="search" placeholder="I should fill the remainder!" />
    </div>

    <div id="right">
        <div class="link">Link</div>
        <div class="link">Link</div>
    </div>
</div>

And a JSFiddle.

Upvotes: 0

Views: 92

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

First you need to reorder the columns as follows:

<div id="menu">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>

Then, you could set margin-left and overflow-x properties to the #middle to do the trick:

#menu #left {
    width: 100px;
    float: left;    
}

#menu #middle {
    margin-left: 100px;  /* Push the #middle column 100px to the right       */
    overflow-x: hidden;  /* Prevent from getting behind of the right column  */
}

#menu #right {
    float: right;
}

JSFiddle Demo.

Also, you had used #link selector to select the anchor tags, while the link is the class value, This would be fixed by using #menu #right .link instead.

Upvotes: 1

Related Questions