2

I am trying to create a 2 column layout where the right side div is a fixed width and its content is always aligned with the bottom of the left side div, and the right side of the window. The left side div can grow/shrink in height/width according to the content and the remaining width of the window.

This is fairly simple using a table layout:

<table>
    <tr>
        <td class="left">
            <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>
        </td>
        <td class="right">
            <span>Fixed text</span><br/><span>Fixed text</span>
        </td>
    </tr>
</table>

<style>
    table {
        border-collapse: collapse;
    }

    .left {
        background-color: green;
    }

    .right { 
        width: 80px;
        text-align: center; 
        vertical-align: bottom; 
        background-color: red;
    }
</style>

http://jsfiddle.net/gpja56se/

However I can not find a way to do this with a div based layout. Is this possible, or is a table layout actually preferable in this case?

Wyvern414
  • 45
  • 7
  • Possible duplicate question... http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid – tpie Apr 09 '15 at 10:54
  • The answers in that question do not address the requirement that the bottom of the content of the right side div is aligned with the bottom of the left side div. – Wyvern414 Apr 09 '15 at 11:07

3 Answers3

2

You can use display:inline-block for div like:

*{
    margin:0;
    padding:0;
}
.main {
    border-collapse: collapse;
}

.left {
    display:inline-block;
    width: 80%;
    background-color: blue;
}

.right { 
   
    text-align: center; 
    vertical-align: bottom; 
    background-color: red;
    display:inline-block;
    width: 20%;
}
<div class="main">
      <div class="left">
          <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>
        </div><div class="right">
          <span>Fixed text</span><br/><span>Fixed text</span>
        </div>
</div>

This way right side div content is always fixed at bottom in respective to left div.

Check Fiddle.

Edit:

You can also use display:table instead display:inline-block; like:

* {
    margin: 0;
    padding: 0;
}
.main {
    border-collapse: collapse;
    display: table;
}
.left {
    background-color: blue;
    display: table-cell;
}
.right {
    background-color: red;
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
    width: 70px;
}

Check edited Fiddle.

ketan
  • 19,129
  • 42
  • 60
  • 98
  • This works, but the issue is that the right side div is using a percentage width which creates extra whitespace if the width of the window is increased. – Wyvern414 Apr 09 '15 at 10:56
  • @Wyvern414 then give fixed width to second div. – ketan Apr 09 '15 at 11:08
  • After changing width:20% to width:80px, the right side div is no longer aligned to the right of the screen. – Wyvern414 Apr 09 '15 at 11:12
0

It can be done using CSS but its more complicated because you are mixing fluid width column with fixed width one. Take a look at this article Ultimate multi-column liquid layouts and this demo The 'Right Menu' 2 column Liquid Layout (Pixel-widths)

dafyk
  • 1,042
  • 12
  • 24
  • This looks promising, but when the right side div has less content than the left, the content should be aligned with the bottom, not the top. Not sure how to accomplish this. – Wyvern414 Apr 09 '15 at 11:18
0

this is a design you can achieve quite easily with css flexbox : updated fiddle

#container {
    display: flex;
}
.left {
    background-color: green;
}
.right {
    flex-shrink:0;
    flex-basis: 80px;
    text-align: center; 
    background-color: red;
    align-self:flex-end;
}

you will still need a container, and the difference with this design is that the right div don't go up to the top. i don't know if that matters ?

try to avoid table as much as bossible - except for real tables

kro
  • 521
  • 6
  • 16
  • This works perfectly - I was not familiar with css flexbox. Unfortunately in my case I am supporting IE9 so cannot make use of this method at the moment. – Wyvern414 Apr 09 '15 at 11:00