Absolutely Positioning Your Blog Search Form

If you take a look at some blogs, you may notice that they have their search bar in some odd places. Some put it in the header, some put it in the horizontal navigation bar, some in the sidebar. I personally like to have it in either the header or in the navigation menu. It seems like that’s always the first place I look when I want to find the search bar.

But getting the search bar positioned correctly can be frustrating, especially if you are using the entire header area to fit your logo.

So today, we’re going to position the search bar absolutely, within the header. I normally don’t recommend absolute positioning, because much of the time it’s not necessary, and if you can avoid it, definitely try to keep your positioning normal. But in this case, I think an exception is in order … so let’s get started!

First, let’s look at the header. For this article, I’ll use the a theme I created a while back called RockinSuckerfish (the 2 column version). Let’s look at some of the header code:

<div id=”header”>
<div class=”rss”>
<ul>
<li><a href=”feed:<?php bloginfo(‘rss2_url’); ?>”>posts feed</a></li>
<li><a href=”feed:<?php bloginfo(‘comments_rss2_url’); ?>”>comments feed</a></li>
</ul>
</div>
<div class=”search”>
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text” size=”15″ value=”Search” name=”s” id=”s” />
</form>
</div>
</div>

For the time being, we’re going to ignore the “rss” div, although it is also positioned absolutely. As you can tell, the hierarchy of the markup goes like this: “header” > “search”

So let’s style the header, and position the search bar. The first thing to do is get our header styled correctly:

#header {
height: 123px;
padding: 0px;
margin: 15px 0px 0px 0px;
background: #9AB6CA url(images/header.jpg);
position: relative;
}

Your header may be different, but the one thing that you definitely need for this to work is the last style, position: relative; Without this, our absolutely positioned search form will position within the browser window instead of its parent element. By adding the position: relative; you allow a child element to be absolutely positioned within the parent.

Now, we need to position the search form. Here’s the code, then we’ll go through it:

#header .search {
position: absolute;
top: 50px;
right: 20px;
}

Now, obviously you can add whatever other styles you want, but you need to have at least this — position: absolute; — distance from either the top or bottom — distance from either the left or right. Notice I said “either/or” on those last two. Don’t do both … it probably won’t work 🙂

As you can see, I decided to position mine 50px from the top, and 20px from the right, within the header div. You can put yours anywhere you like… it’s really up to you.

Like I said, this is a neat trick when you have a pesky element that you want to position accurately and easily … but definitely don’t overuse it.

For more on absolute positioning, check out this article. It goes far deeper than this article, so if you’re interested in learning more, that’s a good place to go.

Enjoy!