Databases
StackOverflow2013
Postsdbo
POTwo Column CSS - Right Column Fixed Width, Left Column ariable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwo Column CSS - Right Column Fixed Width, Left Column ariable
    text
    copied!<p>I've been trying to work out how to get a "two column" type website. Well it's really the main body with a right column floated right.</p> <p>Normally I'd float before the body and set a margin-right on the body and achieve the desired thing.</p> <p>However with Google and SEO, I need to be more creative as the right column should be after the main content which should have a higher prioritisation than the column for textual indexing.</p> <p>Gah.</p> <p>So I come up with this.</p> <p>Critique please:</p> <pre><code>&lt;div id="bodycontainer" style="border:1px solid #0f0; width:800px; margin-left:auto; margin-right:auto; overflow:hidden;"&gt; &lt;div id="bodyoffset" style="border:1px solid #f00; width:100%; margin-left:-210px; overflow:hidden; float:left;"&gt; &lt;div id"bodyrestrict" style="border:1px solid #ff0; margin-left:210px;"&gt; Main Column&lt;br/&gt; Some text goes here.&lt;br/&gt;&lt;br/&gt; I want this column to fill up the remainder space that is filled by the... &lt;/div&gt; &lt;/div&gt; &lt;div id="newscolumn" style="border:1px solid #00f; width:200px; float:left;"&gt; ...Right Column &lt;/div&gt; &lt;p style="clear:both;"&gt;&lt;/p&gt; </code></pre> <p></p> <p>This makes sense to me, the bodycontainer controls overall width, bodyoffset has a negative left margin so we can float the newscolumn onto the right, but bodyrestrict then brings the body back inline by offsetting the negative margin with a positive margin.</p> <p>Some magic voodoo jiggery pokery but it seems to work.</p> <p>Is there a better way?</p> <p>Obviously I don't know what the body element should actually be (and I don't want to go down the JavaScript route if I can help it). So I can't set a width of say 100%-200px or whatever (be good if I could). And I don't want it a fixed width, I want it to expand to fill the screen.</p> <p>Thanks Simon</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