Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>To keep floats and position under control, you need to keep two things in mind: the position is absolute according to its parent element and usually needs dimensions, and floated objects do not have dimensions by default.</p> <p>Since your test represents a simple two-column model, have a look at this nice overview here, it might clarify things up a little bit: <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" rel="nofollow noreferrer">equal height columns with css</a></p> <p>So, the trick here is to give #text a float and pos:rel and then the #right*Part will know where they are positioned.</p> <p>Have a look here:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;style&gt; body { margin: 0; } #headers { background: Olive; width: 300px; height: 50px; } #text { background: Navy; position: relative; width: 300px; display: block; float:left; } #leftPart { background: Gray; width: 200px; float: left; display: inline-block; } #rightPart { background: Red; } #rightTopPart { background: Lime; position: absolute; right: 0; top: 0; } #rightBottomPart { background: Yellow; position: absolute; right: 0; bottom: 0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="headers"&gt;&lt;/div&gt; &lt;div id="text"&gt; &lt;div id="leftPart"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt; &lt;div id="rightPart"&gt; &lt;div id="rightTopPart"&gt;top&lt;/div&gt; &lt;div id="rightBottomPart"&gt;bottom&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Kind regards, mtness</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