This site is an archive; learn more about 8 years of OpenHatch.

[OH-Dev] Requesting CSS help with floats

Kevin Cole dc.loco at gmail.com
Wed Jun 20 17:26:58 UTC 2012


The current three-column style on the site (
https://github.com/paulproteus/oh-mainline/blob/feature/long_trailing_footer/mysite/static/css/base/three_columns.css)
does nothing to force the widths of each column, though it does set the
overall width.

When I want that I do something like:
*
<div id="container" style="width:100%;">

**  <div id="column.1" style="width:33%; float:left; margin:0px 5px;">
     Yada-yada for column 1
  </div>

  <div id="column.2" style="width:33%; float:left; margin:0px 5px;">
     Yada-yada for column 2
  </div>

  <div id="column.3" style="width:33%; float:left; margin: 0px 5px;">
     Yada-yada for column 3
  </div>

</div>*

(Or with classes, in your style sheet:
*
.threecol {width:100%;}
.column   {**width:33%; float:left; margin: 0px 5px;}*

and then just replace the style="..." above with the appropriate
class="...".

That should produce a five-pixel margin on the far left and far right, and
a 10-pixel gap between columns (5 + 5). You may want to adjust the 0px's
above or explicitly use margin-left and margin-right instead.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openhatch.org/pipermail/devel/attachments/20120620/1d803f79/attachment.html>


More information about the Devel mailing list