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
    http://ca.gateway.com/gw/en/CA/content/home

    I have created this

    http://cdpn.io/qJbtk

    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:

    http://codepen.io/tomrogers123/pen/hveqr

    # February 19, 2013 at 9:47 am

    Like this?…http://codepen.io/Paulie-D/pen/CdrfD

    # 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: http://www.webtoolkit.info/css-clearfix.html

    # 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.

*May or may not contain any actual "CSS" or "Tricks".