Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - 3columns page
    primarykey
    data
    text
    <p>I am trying to do 3 columns page and I have problem. My html:</p> <pre><code>&lt;?php $this-&gt;headMeta() -&gt;setIndent(8) -&gt;appendHttpEquiv('Content-Type', 'text/html;charset=utf-8') -&gt;appendName('keywords', 'story') ; $this-&gt;headTitle() -&gt;setIndent(8) -&gt;setSeparator(' - ') -&gt;headTitle('Your Story') ; echo $this-&gt;doctype(); ?&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;base href="&lt;?php echo $this-&gt;baseUrl(); ?&gt;" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo $this-&gt;baseUrl('/styles/site.css'); ?&gt;" /&gt; &lt;?php echo "{$this-&gt;headMeta()} {$this-&gt;headTitle()} {$this-&gt;headLink()}" ?&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="BODY"&gt; &lt;div id="HEADER"&gt; &lt;div id="headerLogin"&gt; &lt;div id="logged-in-as"&gt; &lt;?php echo $this-&gt;loggedInAs(); ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="IMAGE"&gt; &lt;img src="../images/write.png" alt="" height="20%" width="90%" /&gt; &lt;/div&gt; &lt;div id="LOGO"&gt; &lt;img src="../images/logo.png" alt="Your true Story..." height="30%" width="160%"/&gt; &lt;/div&gt; &lt;div id="USER"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="MENU"&gt;Menu: &lt;div id="MENU_IN"&gt; &lt;div id="LIST"&gt; &lt;ul&gt; &lt;?php echo $this-&gt;menuLinks(); ?&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="CONTENT"&gt; &lt;img src="../images/ScG.png" alt="" height="10%"/&gt; &lt;div id="CONTENT_IN"&gt; &lt;?php echo $this-&gt;layout()-&gt;content ?&gt; &lt;img src="../images/ScD.png" alt="" height="10%" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="INFORMATIONS"&gt; &lt;?php $auth = Zend_Auth::getInstance(); if ($auth-&gt;hasIdentity()) { ?&gt; Your profile: &lt;div id="INFORMATIONS_IN" &lt;div id="LIST"&gt; &lt;ul&gt; &lt;?php echo $this-&gt;usersProfilLinks(); ?&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;div id="FOOT"&gt;Iwona Jamroz&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>My CSS:</p> <pre><code> body { background-image: url(../images/back.png); background-repeat: repeat; padding-top: 10px; padding-left: 10px; padding-right: 10px; overflow: visible; height: 100%; } #IMAGE { margin-top: 15px; margin-left: 8%; float: left; } #LOGO{ margin-top: 5px; margin-right: 25%; float: right; } #HEADER{ margin-bottom: 15%; } #MENU { width: 20%; height: 10%; background-image: url(../images/texMenuBack.png); margin-right: 5px; float: left; } #MENU_IN { margin-top:10%; height: 10%; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; background-image: url(../images/texMenuMid.png); } #CONTENT{ margin-left: 21%; margin-right: 21%; float: left; } #CONTENT_IN { padding-left: 8px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; background-image: url(../images/texM.png); background-repeat: repeat; min-height: 150px; } #INFORMATIONS { width: 18%; background-image: url(../images/texMenuBack.png); margin-left: 5px; float: right; } #INFORMATIONS_IN{ margin-top: 14%; margin-bottom: 4px; margin-left: 3px; margin-right: 3px; background-image: url(../images/texMenuMid.png); } #FOOT { clear: both; vertical-align: middle; } #headerLogin a{ color: white; text-align: left; word-spacing: 3px; font-family: fantasy; font-size: 24px; } #headerLogin { color: whitesmoke; font-family: monospace; font-size: 24px; } #LIST { } </code></pre> <p>And I have 3 columns but one after another and I can not understand it as I have read that to do 3 columns layout is enought to write in CSS float: left, float: left, float: right but I all the time have one after another not in one row :/ Why?</p> <p>It looks like this:</p> <pre><code>aaa .......aaaaaa ...................aaa </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