Horizontal List of 2 items with second fixed width and first fill-width

Question

ul.horiz {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.horiz > li {
  display: inline;
}

<ul class="horiz">
<li>This is the first item text</li>
<li>X</li>
</ul>

I want to have a horizontal list of two items fit in a div 100% of the div (so it adjusts as the browser (and div) changes width. The second list item should have a fixed width and the first item should fill the remaining space.

I'm not sure how this is possible. I don't want to do percentages, if possible.

It doesn't necessarily have to be a list (i.e. ul/li), but that was my initial thought.

The first item would be text content and the second item would be an image.

Can you set up a fiddle to show us your code and exactly how it works? — AJ Uppal, Jul 17 '15 at 20:14
You could use `calc()`. https://developer.mozilla.org/en-US/docs/Web/CSS/calc — loveNoHate, Jul 17 '15 at 20:17
@AJUppal, I didn't realize you needed a jsFiddle to show how to put a horizontal list together. If that is required, I will do it, but it seemed trivial to add it to the question. Also, I am inside the corp network and don't have access to jsFiddle or similar tools. I'll have to add that once I get home. — Ed Sinek, Jul 17 '15 at 20:23
You can do it here in the Stackoverflow editor: https://blog.stackexchange.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/. Greetings — loveNoHate, Jul 17 '15 at 20:27

Ben L. · Accepted Answer · 2015-07-17T20:37:36.330

Check out this fiddle I've put together: http://jsfiddle.net/xvo2682e/

It uses the following HTML/CSS:

    .main 
    {
        width: 100%;
        overflow: auto;
    }

    .scaling_left
    {
        margin-right: 100px;
        background-color: #D9F2D0;
    }
    .fixed_right
    {
        float:right;
        width: 100px;
        background-color: #efefef;
    }


   <div class="main">
       <div class="fixed_right">
           Right Column is skinny.
       </div>
       <div class="scaling_left">
           Left column is variably fat.
       </div>
   </div>

Basically, don't float the div whose width you want to scale with the page. Then give that scaling div a margin equal to the width of the fixed-width div on the same side that you float it to.

score 0 · Answer 2 · answered Jul 17 '15 at 20:24

0

[Display table approche][1]

If I understand what you are asking for correctly, this might be one of the way [1]: http://jsbin.com/tonovupite/1/edit?html,css,output

answered Jul 17 '15 at 20:24

Ken Chan

37
3

Horizontal List of 2 items with second fixed width and first fill-width

2 Answers2

Linked