Blogging

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!

Author: nathanrice

14 thoughts on “Absolutely Positioning Your Blog Search Form

  1. Brett,

    that’s a great idea – works good on how-to posts / product posts, no? same reason why those related posts at the end of the article work so well.

  2. I like to put it below the article on many of my blogs. Its also located in the side bars or the upper right hand corner.

    I like it below the article because a number of people will read an article, get an idea and perform a search on a tangent idea right away, so there’s a natural progression to using the search box if it is just below the last place they looked on your blog, the bottom of the article.

  3. I agree with you that a little absolute positioning may be work some miracles.

    In my blog I did the other way around, the search form is safely and conventionally put on the sidebar, but I used absolute positioning on the logo because I didn’t wanted it to perfectly fit the header, I wanted it to spread over the post container as well.

  4. Nathan that’s an excellent article – thanks, and hopefully you’ll be writing more blog theme design articles here

Comments are closed.