House of Fusion
Search over 2,500 ColdFusion resources here
  
Home of the ColdFusion Community

Mailing Lists
Home / Groups / Cascading Style Sheets (CSS)

Show a form to the right of a float

Author:
Ian Skinner
12/18/2007 05:12 PM

I have content that I am floating to the left.  This content does not have a fixed width and I am letting it shrink wrap.  I want the form in the following div to display to the right of the floated content.  As you can see the border and background of the form flows through the floated content.  This is not desirable.  Is there an easy way to do this? Adding a margin-left to the form gets me close, but it assumes I have a know width for the content. TIA Ian CODE ---------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">; <html xmlns="http://www.w3.org/1999/xhtml">;     <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <title>Untitled Document</title>         <style type="text/css">             div#left {                 border: 2px dashed blue;                 float: left;             }                          div#right {                 border: 2px dashed red;             }                          form {                 border: 5px outset green;                 background-color: #ccc;                 width: 30em;             }         </style>     </head>          <body>     <div id="left">         <h1>Div floated to the left</h1>         <p>             Here is content that will be of a variable width.<br />             In reality it will contain a table with data<br />             that can sometimes be wider then other times.<br />             And sometimes may not be present at all.         <p>     </div>          <div id="right">         <form action="foo.bar" method="post">             <h1>A form to display to the left.</h1>             <label for="foo">A field.<input id="foo" type="text" /></label>         </form>     </div>     </body> </html>


Search css

September 22, 2014

<<   <   Today   >   >>
Su Mo Tu We Th Fr Sa
   1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30         

Designer, Developer and mobile workflow conference