Forum Moderators: open
<div id="div1" style="border:1px solid #000000">
Anything Here
</div> <form action="page.php">
<div id="div2" style="border:1px solid #000000">
<input type="submit" value="Search" />
<input id="term" type="text" />
</div>
</form>
OR even this
<div id="div1" style="border:1px solid #000000">
Anything Here
</div><div id="div2" style="border:1px solid #000000">
<form action="page.php">
<input type="submit" value="Search" />
<input id="term" type="text" />
</form>
</div>
div2 will be shown indented. Why is it that and how can I fix that?
The second sample does require the removal of added top and and bottom margin in IE, but everything is left aligned and stacked.
<form action="page.php" style="margin: 0;">
The indent appears to be coming from somewhere else in the markup.?
Also, consider that most of the time you **don't** have to wrap it in a div unless the form goes with other elements that need to be grouped together. Apply your selectors to the form just as you would a div. This removes one less div reducing "div-itis" . (thx swa66) Style the semantic document elements first and start adding div's only as required to divide the page elements into a layout.
#some-form {
margin:0;
padding:0;
width: 200px;
float:right;
}
<form action="" id="some-form">
... for example.
divitis and classitis: yeah, thanks rocknbil. Those are indeed CSS problems that one sees often.
If you need a wrapper elements inside a form, there's a semantic one: fieldset (it has a border by default in most browsers, but that's easy enough to turn off).
