Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Laura Cressman
Laura Cressman
12,548 Points

Having a search box to the right of text

I am trying to format the CSS for a search input next to some text. It would be nice to have the text centered, with the search box to the right of it.

Here is my code so far:

HTML:

<input type="search" placeholder="Search...">
<h2>Some text!</h2>

CSS:

h2 {
    margin: 1%;
    display: inline-block;
    font-size: 1.2em;
    vertical-align: bottom;
}

input[type="search"] {
    outline: none;
    margin: 1%;
}

Thank you!!

2 Answers

James Barnett
James Barnett
39,199 Points

Not quite sure what you are going for.

Something like this?

Imgur

working demo: http://codepen.io/jamesbarnett/pen/tpfDA/

Laura Cressman
Laura Cressman
12,548 Points

Exactly, except with the Search on the left instead of the right. I just realized that my original post had a typo-my bad! And in general how to position the two. Is it possible to center the text while still having a search box on the left? Thank you for your help!

Sam Roth
Sam Roth
1,457 Points
Sam Roth
Sam Roth
1,457 Points

Hi Laura,

You may be interested in implementing Bootstrap's horizontal form. They've provided source code below the demo, which you should easily be able to adjust for a search box.

Laura Cressman
Laura Cressman
12,548 Points

Thank you!! I will look into it for sure