Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you use floats, you pretty much need to give them widths. Floats are fine if you specify the width or you're happy with whatever the browser calculates as the minimum required width. As soon as you need them to expand to fill available space you're out of luck.</p> <p>In fact you're using the wrong tool.</p> <p>So you have two possibilities:</p> <ol> <li>Fix the size of the floats; or</li> <li>Use a table.</li> </ol> <p>With tables this is a trvial problem to solve (waits for the anti-table pure-CSS fanatics to go nuts).</p> <p><strong>EDIT:</strong> Ok, you want to do verticall centering as well. Now you're really in trouble. See <a href="https://stackoverflow.com/questions/522928/can-you-do-this-html-layout-without-using-tables">Can you do this HTML layout without using tables?</a> for how hard even simple layout can be with pure CSS, particularly when you want to do vertical centering (when the container or the child aren't fixed height) or side by side content.</p> <p>Again, tables make this trivial with <code>vertical-align: middle</code>.</p> <p>If you want more information on vertical centering with pure CSS, see:</p> <ul> <li><a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow noreferrer">Vertical Centering in CSS</a>: three levels of nested divs... just to get vertical centering;</li> <li><a href="http://hicksdesign.co.uk/journal/how-to-vertical-centering-with-css" rel="nofollow noreferrer">How to: vertical centering with CSS</a>; and</li> <li><a href="http://blog.themeforest.net/tutorials/vertical-centering-with-css/" rel="nofollow noreferrer">Vertical centering with CSS</a>.</li> </ul>
    singulars
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      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