Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>hopefully i understood what you're looking for....</p> <p>i normally try to avoid using tables in building the layout of the page but in that case, if you want a changing width, it's either that or javascript with divs.</p> <p>having the grey box stuck on the right side of the content box is not too complicated if you remember one rule: place fixed content first.</p> <p>what i've done is having the grey box floated right inside the #inner box, which will have 0 padding and margins. whatever will go inside - will have the necessary padding.</p> <p>NOTE: IE 6 does not handle side margins properly, so i always try to avoid them (and use padding instead).</p> <p>here's my suggested code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;style type="text/css"&gt; body { margin: 0px; padding: 0px; } #layout { width: 100%; border: none; } #layout #sidebar { width: 180px; } #inner { float: left; width: auto; background: rgba(0, 255, 0, 0.1); } #inner p { padding: 0 8.571428571429%; margin: 0px; } #sidebar { width: 180px; background: rgba(0,0,255, 0.1); } .alignright { float: right; width: 53.75%; background: rgba(0, 0, 0, 0.5); color: #fff; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table cellspacing="0" cellpadding="0" id="layout"&gt; &lt;tr&gt; &lt;td id="inner" valign="top"&gt; &lt;p&gt;Fluid width with 8.571428571429% L/R padding&lt;/p&gt; &lt;p&gt;Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum.&lt;/p&gt; &lt;div class="alignright"&gt;Here is some aligned-right goodness.&lt;/div&gt; &lt;p&gt;Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id.&lt;/p&gt; &lt;/td&gt; &lt;td&gt; &lt;td id="sidebar" valign="top"&gt; &lt;p&gt;Fixed width 180px sidebar&lt;/p&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>as you can see - the elements INSIDE the #inner element will receive the needed padding</p> <p>i used a table for the layout to avoid javascript. i must state that i would prefer going the js way.</p> <p>hope that solves it for you</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