- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 ?
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
Like this?…http://codepen.io/Paulie-D/pen/CdrfD
@tomrogers123 : thank u very much , now I understand my problem
@Paulie_D: you rockz :)
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 ?
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
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.
thanks again