Thomas Thomas - 5 months ago 19
CSS Question

Fixed width div on left and Disqus on right

I'm trying to have my 2 elements display one next to each other.

<footer>
<div id="left">....</div>
<div id="disqus_thread">....</div>
</footer>


Here are various things that I have tried and didn't work:

footer {display: table;}
#left {display: table-cell; width: 500px;}
#disqus_thread {display: table-cell; width: auto;}


another that didn't work:

footer {display: block;}
#left {display: inline-block; float: left; width: 500px;}
#disqus_thread {display: inline-block; float: right;}


and a few other combinations that involve
float/left/right
or
overflow:auto
.

one big problem is that my Disqus thread ends up being
1px
in width many times.

enter image description here

Answer

You CSS table layout should work, but you'd better to set a width to the table, also worth to set a vertical-align value to the cells.

Because, table has the "shrink to fit" feature, and I guess the Disqus form is loaded from an iframe so width of the form depends on the container.

footer {
  display: table;
  width: 100%;
}
#left {
  display: table-cell;
  vertical-align: top;
  width: 500px;
}
#disqus_thread {
  display: table-cell;
  vertical-align: top;
}

If you prefer to use float, you can use calc(), and don't forget to clear the floats.

footer:after {
  content: "";
  display: table;
  clear: both;
}
#left {
  float: left;
  width: 500px;
}
#disqus_thread {
  float: left;
  width: calc(100% - 500px);
}