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
Short Link: http://www.houseoffusion.com/groups/css/thread.cfm/threadid:1543#4849
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>
Author: Peter Boughton
Short Link: http://www.houseoffusion.com/groups/css/thread.cfm/threadid:1543#4850
>> 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 -----
|
May 26, 2013
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
