Databases
StackOverflow2013
Postsdbo
POCSS Float behaviour (even after checking W3C)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Float behaviour (even after checking W3C)
    primarykey
    data
    text
    <p>I have an issue with float and have included the sample code below. I am trying to create a two column layout: I know how to do this a number of other ways so this question is with a view to finding out why FLOAT behaves the way it does here. </p> <ul> <li>The container DIV has two DIVs, both are floated left. </li> <li>As expected, the size of the browser window determines whether or not the second floated block level element will go alongside or under the first floated element.</li> <li>The problem arises with the length of the content in the second floated DIV (assume the browser window is maximized, at whatever resolution). </li> </ul> <p>In the code below, I have commented out part of the second paragraph. On my browser this is the cut off mark: including any content after this causes the whole DIV to clear the first DIV, even though there is a lot of space left in the second DIV before it should need to clear the first DIV.</p> <p>I cannot see anything in the code that should cause this to happen. I am aware of how float behaves in terms of block level and inline content and the consequences of placing non-floated blocks beside floated ones, but I cannot find anything in the documentation to explain why the block should clear when there seems to be sufficient room for its content.</p> <p>Help much appreciated.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;title&gt;CSS Float Problem&lt;/title&gt; &lt;style&gt; body { background:#5c604e; } #container { position:relative; background:yellow; } p { background-color:#cccccc; width:50%; } .block { width: 200px; height: 200px; } .float { float: left; } .pink { background: #ee3e64; } .blue { background: #44accf; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div class="block pink float"&gt;Lorem ipsum dolor sit amet consectetuer Nam fringilla Vestibulum massa nisl. Nulla adipiscing ut urna ipsum Curabitur urna lacinia pretium feugiat Ut. &lt;/div&gt; &lt;div class="blue float"&gt; &lt;h2&gt;Test Heading&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum erat a neque eleifend vitae ultrices nisi tempor. Praesent facilisis lobortis nisl, &lt;!--sit amet gravida orci mollis vitae. Maecenas porta turpis id urna porta id ornare velit dapibus. &lt;!-- Proin sollicitudin, tortor viverra posuere mattis, nisl est rhoncus urna, nec elementum augue turpis vitae diam. Pellentesque ut quam sit amet elit tempus suscipit nec vel nulla. Proin ullamcorper sollicitudin metus in posuere. Aliquam a vehicula odio. Morbi scelerisque arcu ac nibh cursus ullamcorper. Aliquam pulvinar commodo nunc nec laoreet. --&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--end of container div --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>See it at <a href="http://cssdesk.com/86cPH" rel="nofollow">http://cssdesk.com/86cPH</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmskfisher
    1. UScaseyc
    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
    1. VO
      singulars
      1. POCSS Float behaviour (even after checking W3C)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI've dumped it at http://cssdesk.com/86cPH, in future if you can provide such a demo it'd be helpful.
      singulars
      1. POCSS Float behaviour (even after checking W3C)
      1. USChris Morgan
    2. COWasn't familiar with that. Thanks, I'll do that in future.
      singulars
      1. POCSS Float behaviour (even after checking W3C)
      1. UScaseyc
 

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