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

Question

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.

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.

Hashem Qolami · Accepted Answer · 2014-02-02 12:18:00Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related