# Kirupa CSS Rollover Tutorial - Switching to Horizontal

**URL:** <https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-switching-to-horizontal/245442>\
**Category:** Uncategorized\
**Created:** [November 29, 2007, 7:15pm UTC](https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-switching-to-horizontal/245442 "2007-11-29T19:15:22Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vjb2](https://avatars.discourse-cdn.com/v4/letter/v/858c86/32.png) [@vjb2](https://forum.kirupa.com/u/vjb2)\
**Post date:** [November 29, 2007, 7:15pm UTC](https://forum.kirupa.com/t/kirupa-css-rollover-tutorial-switching-to-horizontal/245442/1 "2007-11-29T19:15:22Z")

</div>

Hi. I searched the forum for an answer, but it seem there are tons of different CSS rollover threads.

To cut to the point, I’m following this tutorial ([http://www.kirupa.com/css/css\_rollovers.htm](http://www.kirupa.com/css/css_rollovers.htm)), and everything was working out nicely until I noticed that my rollovers were appearing one on top of another instead of horizontal, which is how I thought they were going to appear considering how I was placing the coding.

Here is my CSS for the moment:

\<style type=“text/css”\>  
#home{  
height: 29px;  
width: 71px;  
text-indent: 10000px;  
overflow: hidden;  
background: url(homelink.jpg) top left no-repeat;  
display: block;  
}

#home:hover{  
background-position: bottom left;  
}

#about{  
height: 29px;  
width: 60px;  
text-indent: 10000px;  
overflow: hidden;  
background: url(aboutlink.jpg) top left no-repeat;  
display: block;  
}

#about:hover{  
background-position: bottom left;  
}  
\</style\>  
\</head\>

\<body\>  
\<a href="[#" id=“home”\>Home\</a\>\<a href="[URL=“http://coldvic.livejournal.com/info”]#](http://coldvic.livejournal.com)" id=“about”\>About\</a\>  
\</body\>

There is no \<br\> to make it go under the other, so I’m wondering how I can put them side-by-side instead? Thanks in advance! 😏