Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS formatting gone wrong
    primarykey
    data
    text
    <p>I want the list to float in the center of the menucontainer. Also the text in the boxes below the house (it's just a random image I took for demonstration) to float in the center of the box.</p> <p>And then I want the content container to fill up all the space left in the bigcontainer below the menucontainer.</p> <p>This is what i wanted to get: <img src="https://i.stack.imgur.com/iR5Lp.jpg" alt="what i wanted..."></p> <p>And this is what i wound up with: <img src="https://i.stack.imgur.com/3KfQX.jpg" alt="what i got..."></p> <p>Obviously I have no idea what I'm doing. This is the code: <a href="http://jsfiddle.net/krhzM/" rel="nofollow noreferrer">http://jsfiddle.net/krhzM/</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; ul { list-style:none; position:relative; } li { border: 1px solid #CCC; margin:5px; float:left; } #menucontainer { border: 1px solid #111; width: 400px; margin-left: auto; margin-right: auto; } #contentcontainer { width:100px; border: 1px solid #fac; } #bigcontainer { border: 2px solid #cfa; width: 700px; margin-left: auto; margin-right:auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="bigcontainer"&gt; &lt;div id="menucontainer"&gt; &lt;ul&gt; &lt;li&gt; &lt;img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/&gt; &lt;br/&gt; &lt;a href="#"&gt;Coffee&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/&gt; &lt;br/&gt; &lt;a href="#"&gt;Tea&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;img src="http://png-1.findicons.com/files/icons/909/archigraphs_collection/80/house.png"/&gt; &lt;br/&gt; &lt;a href="#"&gt;Coca Cola&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="contentcontainer"&gt; &lt;h1&gt;this is my content&lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    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.
 

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