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

Laura Cressman
Laura Cressman
12,548 Points
Posted by Laura Cressman
Laura Cressman
12,548 Points

Issues with aligning text and search form element

Hi everyone, I am trying to build a container with a search box on one side and some text (tagline) on the other side. However, I can't figure out two issues:

  1. How to align the placeholder text with the tagline text
  2. How to keep the tagline from overflowing when I resize the browser.

Please help! Here is my code: 

 <div class="grid-container">
        <input class="grid-3" type="search" placeholder="Search...">
        <h2 id="tagline" class="grid-4">Some tagline text!</h2>
      </div>

#tagline {
    color: #708090;
    font-size: 1.2em;
    display: inline-block;
    white-space: nowrap;
}

input[type="search"] {
    outline: none;
    margin: 1%;
    height: 30px;
}
Jeff Busch
Jeff Busch
19,287 Points

Hi Laura,

I copied and pasted your code and viewed it in Chrome and to be honest I don't see the problem I think you are describing. The only thing I did to your code is add a pound sign (#) before tagline in the css.

Jeff

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Thank you Jeff! It is reassuring to know that it doesn't look bad from your end :)

5 Answers

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Here's a codepen with your code: http://codepen.io/jacobpatrick/pen/kLqxp/ I added a margin top to the tagline text - does that look how you wanted it? The reason it's not vertically aligned is because you have a margin of 1% on the input, but no margin on the tagline.

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

Can you describe your problem in a little more detail? Where are you trying to place the placeholder text? What do you mean by aligning it with the tagline text? What do you mean by keeping the tagline from overflowing? What does your grid related css look like?

Thanks.

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Hi Jacob, I mean that the tagline and placeholder text are vertically aligned. Also, when I used the grid CSS provided in one of the tracks, it wasn't working as well for me as when I simply floated the tagline to the right and gave it a right margin of 5%. Thanks for getting back to me!

Laura Cressman
Laura Cressman
12,548 Points
Laura Cressman
Laura Cressman
12,548 Points

Thank you Jacob-fixed the vertical alignment problem! I appreciate your going out of your way to help me :)