Page 1 of 1

Can't get block element to line up right [56k warn]

Posted: Mon Jan 29, 2007 2:34 pm
by Luke
I have a search box that floats (right) inside of a horizontal bar on the top of a site I'm building. The label and the input line up fine because they are inline elements, but because I've set the <a> tag to "display: block" it won't line up inside of the bar any more. Anybody know how I can get it to go back in there??

Code: Select all

<div id="search_box" class="float_right">
  <label for="search">Product Search</label> <input type="text" id="search" name="Search" class="text search" />
  <a href="javascript://" onclick="document.search_form.submit()" class="button go"><span>Go</span></a>
</div>

Code: Select all

#search_box{
	padding: 3px 10px 0 0;
	float: right;
}
form .go
{
	width: 33px;
	height: 20px;
	background: url(../images/buttons/go.gif) no-repeat 0px -20px;
	display: block;
}
Here is how it looks (The semi-opaque "go" button is where I want it to display, and the other is where it is displaying)
Image

Posted: Mon Jan 29, 2007 2:44 pm
by matthijs
Have you tried to float it?

Posted: Mon Jan 29, 2007 2:46 pm
by feyd
Is it wrapping because of the div?

Posted: Mon Jan 29, 2007 2:47 pm
by Luke
matthijs wrote:Have you tried to float it?
Yup, no luck.
feyd wrote:Is it wrapping because of the div?
What do you mean?

Posted: Mon Jan 29, 2007 2:50 pm
by matthijs
Have you tried floating everything and giving all elements a width (%, em, or px). That should definitely work

Posted: Mon Jan 29, 2007 2:52 pm
by feyd
Well, if memory serves floating a div right forces dimensions on it. Since you have whitespace in the div those are possible wrapping points the browser may choose to keep the div in the size it chose.

Add a border to the div to see.