Forums

sshuvro58

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

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 ?

tomrogers123

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

Paulie_D

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

sshuvro58

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

@Paulie_D: you rockz :)

sshuvro58

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 ?

tomrogers123

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

Paulie_D

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.

sshuvro58

thanks again

@tomrogers123 and @Paulie_D

treehouse : what would you like to learn today?

Forums

[Solved] Styling Header