placing a form into a certain div...

[qwertyuiop]

Hi, im trying to place a form into a thin, 15px, div bar. The problem is, when i put the form code into the <div></div>, it seems like i put a couple of <br>'s in front....

Heres the html:

<div class="bar">

just some plain old text here...

<span title="Search the site">
<form method="post" action="http.wau4k.com/quyo">
<input type="hidden" name="crid" value="52318042a4a6" />
Search:
<input name="query" size="8" class="search" />
<input type="button" value="go" alt="Go!" name="submit" />
</form>
</span>

</div>

css:

.bar {
	display: block;
	border: 1px solid #B3B3B3;
	border-bottom: 3px;
	border-right: 3px;
	width: 100%;
	height: 15px;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	text-align: center;
	background-color: #EDEDED;
	white-space: nowrap;
}

Whats wrong? i even tried replacing the button with an image (<input type="image" src="imgbutton.gif" alt="Go!" name="submit">) which is less that 15px...AND made the input box (the thing where you type stuff in) smaller in height... I can't make the whole thing on one line

[freak]

Try setting the margins of the form elements to 0.

// freak

[qwertyuiop]

It works, kind of. The "margin: 0px" did take away the giant margin, but the form is still on another line, as if there were one br...

[mindlessLemming]

A form is a block elementv (isn't it?). Try putting your span inside the form tags.

[rmedek]

this is more of a question... could you use the css for form (i.e. form {display:inline ... etc}) instead of the div? So you don't have nested block elements?

-Rich

[ronaldb66]

Form = block

Rich,

sure you can, but there may be reasons unknown why he needs an extra div around it.

qwertyuiop,

Since span is an inline element by default and can hold only inline content, it shouldn't contain a complete form; the title attribute can be used on the form element just as well.
If you still can't figure out where the extra space is coming from, try and set a border for the form as well, and experiment with margin, padding, bits of text here and there to see where they end up, etc. It's not unimaginable that for the non-existent (at least inline) content of the span a space is reserved.

[qwertyuiop]

Adding a border shows me that the form takes up the whole row-as if the width were 100%. I added a width attribute (is that what its called?) so:

<div class="bar">

just some plain old text here...

<form method="post" action="http.wau4k.com/quyo" title="Search the site" class="searchtest">
<input type="hidden" name="crid" value="52318042a4a6" />
Search:
<input name="query" size="8" class="search" />
<input type="button" value="go" alt="Go!" name="submit" />
</form>

</div>

css:

.searchtest {border: 1px solid red;
width: 135px; margin: 0px;}

if i add some text after the form, the text is thrown down another line (ex. ...</form>textext...), as if there were, a BR! Is this due to the: text-align: center in the bar div css?

[ronaldb66]

Block

No, form is a block element, so any content that follows it, be it inline or block, is placed underneath it, following the normal flow.

Update:

It just occurred to me that the input element might be a block one, too; I tried to get confirmation in the DTD, but I got a bit lost.
If anyone can confirm or deny this, I'd be interested to know.

Anyway, you could try display: inline on the inputs to see what happens...

[qwertyuiop]

yay!

Cool, display: inline works! Thanks ronaldb66!

[ronaldb66]

Congrats!

Qwertyuiop,

you're welcome; sounds like input is a block level element after all!

[qwertyuiop]

I guess so.
I have a new problem now <sighs>. I want the form to be positioned on the right of the bar div, but the text is still centered in the middle. Ive tried this:

position: relative; right: 1px;

it doesn't seem to work. Ive also tried something else, and it did align to the right, but it moved the form down (like BR). How can this be accomplished?