Databases
StackOverflow2013
Postsdbo
POFill height of a floating nested div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFill height of a floating nested div
    primarykey
    data
    text
    <p>I was making a basic commenting system. It's perfect when the comment is short, but when the user writes a lot, comment is not as fancy as it should be... I've tried to fill the space with <strong>height: 100%;</strong> but it doesn't work as I expected. I wanted the author info to fill in height to the comment.</p> <p>What I've tried so far: <a href="http://jsfiddle.net/anWVC/3/" rel="nofollow">http://jsfiddle.net/anWVC/3/</a></p> <p>HTML:</p> <pre><code>&lt;div class='comment'&gt; &lt;div class="f-left"&gt; &lt;small style="font-size: .8em;"&gt;23:44 - 10/12/2011&lt;/small&gt; &lt;img src='http://comenzarjuego.com/wp-content/uploads/2010/02/pikchu.jpg' width='96' alt='Avatar' /&gt; Pikachu_Monster&lt;br/&gt; ------------&lt;br /&gt; Age: 19&lt;br /&gt; Comments: 67&lt;br/&gt; &lt;/div&gt; &lt;div&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat mattis nibh eget viverra. Vivamus dolor erat, eleifend mollis fringilla nec, sodales in sapien. Praesent sit amet adipiscing augue. Fusce fermentum luctus euismod. Fusce ac elit enim. Maecenas tempor volutpat tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae lectus non sapien consectetur rhoncus. Sed mi mi, sagittis ullamcorper rutrum nec, imperdiet nec libero. Sed commodo orci eleifend mi sagittis et auctor massa convallis. Nam vitae velit vitae ante eleifend dapibus. Quisque tincidunt risus quis magna sodales non scelerisque elit malesuada. Vivamus mattis diam sed ipsum gravida nec porta odio ullamcorper. Sed at velit eget libero mollis dapibus vitae at sapien. Sed adipiscing lacinia justo ullamcorper hendrerit. Phasellus tempor sodales libero, eget ultrices tortor sollicitudin condimentum. Curabitur id nisi metus. Quisque posuere sapien laoreet est consectetur pretium sed et erat. Etiam eget enim metus. Fusce rutrum blandit porta. Etiam posuere semper accumsan. Curabitur et justo massa. Sed tellus sem, congue a consectetur vitae, tempus quis leo. Ut lacinia gravida neque ac viverra. Cras placerat ante ut justo tempor condimentum. Donec interdum, felis a dapibus hendrerit, augue ante sodales leo, vitae molestie arcu neque a magna. &lt;/div&gt; &lt;br style="clear: both;"&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.f-left{ float: left; text-align:center; background: #ccc; width: 128px; margin-right: 16px; height: 100%; } .comment{ background: #aaa; } </code></pre> <p>Thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRyan Casas
    1. USRyan Casas
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POFill height of a floating nested div
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POFill height of a floating nested div
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POFill height of a floating nested div
      1. USDustin
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload