Treehouse: Grow your CSS skills. Land your dream job.

Styling Header

  • # February 19, 2013 at 9:16 am

    I want to create a similar header with navigation and with search bar like

    I have created this

    I am ok everything but the problem is , My search bar and search button break , I mean they are not in the same line . I want logo , nav menu and search bar with button in a single line .

    How can I do this ?

    # February 19, 2013 at 9:42 am

    I think you just needed to remove the static width on `#search-form` so that it just knows to use the remaining space on the line.

    Here is the fixed version:

    # February 19, 2013 at 9:47 am

    Like this?…

    # February 19, 2013 at 9:56 am

    @tomrogers123 : thank u very much , now I understand my problem

    @Paulie_D: you rockz :)

    # February 19, 2013 at 9:59 am

    One more question : @Paulie_D

    why did u use a class in header ?

    .cf:after {
    content: “”;
    display: table;
    clear: both;
    actually what does these codes do ?

    # February 19, 2013 at 10:05 am

    That’s called a clearfix. It makes sure any containers with only floated elements inside of them (the header in this case) do not loose there height.

    More here:

    # February 19, 2013 at 10:11 am

    It’s a clearfix ‘hack’.

    If you do not set a height for the header (which I normally wouldn’t) then it will collapse as all of the elements inside are floated.

    This stops that.

    # February 19, 2013 at 10:14 am

    thanks again

    @tomrogers123 and @Paulie_D

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.