CODEWITHSUNDEEP
csscss-float
Vladimir Prus
Vladimir Prus

Reputation: 4640

Column layout without fixed widths

I want to do something really basic -- a two column layout where the width of of the left column is determined by the content (which is always small), and the right column takes the remaining width.

The full example is at http://jsfiddle.net/EzHVX/2/, but basically I have HTML as follows::

<div class="left">
   <div class="badge">all 15</div>    
</div>

<div class="right">
   <div class="badge">...</div>
   <div class="badge">...</div>    
  ....
</div>

and essential part of CSS is just::

.left {
    float: left;
}    

.right {
    float: left;
    width: 400px;
}

Without explicit width, the right column starts to wrap around the left column, which I don't want. But I also don't want to use explicit width. And CSS does not support "100% - 10em" as width. And even if it supported it, I'd rather not hardcode "10em" either. So what options do I have?

Upvotes: 1

Views: 110

Answers (4)

Kishan Patel
Kishan Patel

Reputation: 1408

The HTML

<div class="parent">
  <div class="left">
     <div class="badge">all 15</div>    
  </div>

  <div class="right">
     <div class="badge">...</div>
     <div class="badge">...</div>    
    ....
  </div>
  <div class="clear"></div>
</div>

The CSS:

.parent{
   widht: 100%;
   clear:both;
}
.clear{
   clear:both;
}
.left {
    float: left;
}    

.right {
    float: left;
}

The jQuery

$(document).ready(function(){
    var parent_width= $('.parent').width();
    var left_width= $('.left').width();
    var right_width = parseInt(parent_width) - parseInt(left_width);
    $('.right').css('max-width',right_width);

});

Upvotes: 0

Chris Li
Chris Li

Reputation: 3725

You can use Flex layout to implement (older IE does not support this.)

    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */     
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

example: http://jsfiddle.net/EzHVX/7/

Upvotes: 0

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

You could use some table-layout CSS properties to accomplish this, works down to and including IE8:

jsFiddle

body > div {
    display: table-row;
    width: 100%;
}
.badge {
    background-color: #468847;
    border-radius: 9px;
    padding: 2px 9px;
    color: #ffffff;
    width: auto;
    display: inline-block;
    margin: 6px;
    white-space: nowrap;
}
.left {
    display: table-cell;
}
.right {
    display: table-cell;
}

Upvotes: 0

Vinay Pandey
Vinay Pandey

Reputation: 8913

overflow:hidden; to the right div will do the job

have updated the link you gave please let know if this works for you

http://jsfiddle.net/EzHVX/4/

Upvotes: 1

Related Questions