|
|
Home /
Groups /
Cascading Style Sheets (CSS)
Show a form to the right of a float
I have content that I am floating to the left. This content does notIan Skinner 12/18/07 05:12 P >> Adding a margin-left to the form gets me close, but it assumes I have aPeter Boughton 12/18/07 06:59 P 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> >> Adding a margin-left to the form gets me close, but it assumes I have a >> know width for the content. Mirror that. You have a known width for the right-hand column, so put a margin-right on the left-hand one. On Dec 18, 2007 10:10 PM, Ian Skinner <HOF@ilsweb.com> wrote: ----- Excess quoted text cut - see Original Post for more -----
|
Mailing Lists
|
Latest Fusion Authority Articles
|
||||||
