JavaScript and client side scripting.
Moderator: General Moderators
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Mon Jan 29, 2007 2:34 pm
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)
matthijs
DevNet Master
Posts: 3360 Joined: Thu Oct 06, 2005 3:57 pm
Post
by matthijs » Mon Jan 29, 2007 2:44 pm
Have you tried to float it?
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Mon Jan 29, 2007 2:46 pm
Is it wrapping because of the div?
Luke
The Ninja Space Mod
Posts: 6424 Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA
Post
by Luke » Mon Jan 29, 2007 2:47 pm
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 » Mon Jan 29, 2007 2:50 pm
Have you tried floating everything and giving all elements a width (%, em, or px). That should definitely work
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Mon Jan 29, 2007 2:52 pm
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.