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

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

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

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Have you tried to float it?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Is it wrapping because of the div?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Have you tried floating everything and giving all elements a width (%, em, or px). That should definitely work
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
Post Reply