Note that there are some explanatory texts on larger screens.

plurals
  1. PONested Floating Divs
    primarykey
    data
    text
    <p>I have two MAIN DIVs inside a DIV which is a PART of the page.</p> <pre><code>&lt;div class="commentholder"&gt; &lt;div class="cthumbnail"&gt; &lt;!-- #1 --&gt; &lt;a href="#"&gt;&lt;img src="source"&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="ccontent"&gt; &lt;!-- #2 --&gt; &lt;a href="#" class="post_author"&gt;Dilip Raj Baral&lt;/a&gt; this is a comment.. &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="cstatus"&gt; April 16, 2012 &amp;#183; &lt;a href="#" class="like"&gt;Like&lt;/a&gt; &amp;#183; &lt;a href="#" class="likes"&gt;0&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>As shown CTHUMBNAIL and CCONTENT are two main DIVs inside a DIV. They are actually two columns. CTHUMBNAIL has a THUMBNAIL of a picture to display at the left and CCONTENT has comments. CSS associated with them are:</p> <pre><code>#content .commentholder { display: block; padding: 5px 0 5px 0; border: 2px dotted #d2d9e7; /**********/ } #content .ccontent { vertical-align: top; margin-left: 10px; float: left; width: 350px; /*change*/ #content .cstatus { display: block; float: left; margin-top: 1px; color: #979797; font-size: 11px; } #content .cthumbnial {float: left;} #content .cthumbnail img { width: 32px; height: 32px; } </code></pre> <p><a href="http://connectu.saipal.edu.np/styles/style.css" rel="nofollow">http://connectu.saipal.edu.np/styles/style.css</a>This is the <strong>FULL CSS</strong> if you require..</p> <p>COMMENTHOLDER div should be bordered with the floating DIVs THUMBNAIL and CCONTENT inisde it. But it doesn't happen so. Rather, it displays like:</p> <p><a href="http://minus.com/mCCHNGVfu/" rel="nofollow">http://minus.com/mCCHNGVfu/</a> (this is the image link. i wasnt' allowed to include an image.</p> <p>Thumbnail and Comment are not inside the border of COMMENTHOLDER DIV.</p> <p>This is what I was trying to fix the whole day.</p> <p>What must be the glitch.. help me out, please!!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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