Databases
StackOverflow2013
Postsdbo
POHow to center multiple divs (floated left) contained within another div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to center multiple divs (floated left) contained within another div
    text
    copied!<p>Edit: Apologies to those who answered the original question that didn't included the complication with the unordered lists.</p> <p>Whenever I put multiple div elements <strong>containing unordered lists</strong> into another div element, I can't center the inner div elements. Here's a simple illustration and the accompanying code:</p> <p><img src="https://i.stack.imgur.com/Aop8q.png" alt="enter image description here"></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-Ca" xml:lang="en-Ca"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #container { border:solid; overflow:hidden; width:40%; } #one, #two, #three { border: solid red; display:inline-block; margin:0 auto; } .clear { clear:both; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="one"&gt; &lt;ul&gt; &lt;li&gt;One&lt;/li&gt; &lt;li&gt;Two&lt;/li&gt; &lt;li&gt;Three&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="two"&gt; &lt;ul&gt; &lt;li&gt;Four&lt;/li&gt; &lt;li&gt;Five&lt;/li&gt; &lt;li&gt;Six&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="three"&gt; &lt;ul&gt; &lt;li&gt;Seven&lt;/li&gt; &lt;li&gt;Eight&lt;/li&gt; &lt;li&gt;Nine&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Whether I put display:inline-block or float:left doesn't seem to make any difference, nor does adding a wrapper class or specifying a width. How do I center the three red boxes within the black box?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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