CODEWITHSUNDEEP
csslayouthtml
Chris
Chris

Reputation: 7855

CSS Layout filling the rest of the horizontal space

I'm trying to achieve a specific css layout. I tried a lot of possibilities including floats, and css tables but i just can't figure it out. CSS tables helped me a lot in the past when there are some fixed columns and some columns that should take the rest of the space but this one seems to be different.

I need to have two columns. Toghether they need to be 100% width of their parent. The right column should be as wide as its content (i.e. it's got 3 buttons in it it should be as wide as these three buttons). The left column should take the rest of the remaining space. Thats it. Sounds easy. In TeX world it is called "\hfill" i would love to have such a command in css.

Here's what i tried so far:

<section>
<div id="a"></div>
<div id="b">
    <button>Bla</button>
    <button>Test</button>
    <button>Hello</button>
    <button>World</button>
</div>
</section>

CSS:

section { display: table; width: 100%;}
div { display: table-cell; height: 100px; border: 1px solid #000;}
#a { width: 100% }
#b{ }

And a fiddle:

http://jsfiddle.net/fa9FJ/270/

actually this is quite close to what i want, but the buttons need to be next to each other horizontally.

Upvotes: 1

Views: 241

Answers (3)

Gintas K
Gintas K

Reputation: 1478

#b { display: table; }
button { display: table-cell; }

this should do the trick :)

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4648

Try this..it works

button
{
   width: 96%;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

What you need is

#b { 
   white-space: nowrap;
}

Demo

This will prevent the buttons to wrap inside the div element

Upvotes: 2

Related Questions