Float problem! Confusion?!

Question

hey guys,
I am very much confused at how to bring two divs in same horizontal line! I always get stuck at it.
for example: I was making a navigation bar. At left end i put home,contact....(total 5 ) and at the other end i was trying to put icons of fb,insta, Twitter ( in same nav bar means how to combine them). Really I am frustrated.

And what's the use of 'clear' in css?

pls help me out!
Thanks in advance

Answer 1

'float' css property is no more a good way to do it, and its use could be particularly tricky ^^
Better ways are:
+ use of 'display' css property with 'table'-family value, to get behaviour of <table>-family elements, without the semantical meaning of them
+ use of 'display' css property with 'flex' value
There are some other ways, but both are the most effecient AND widely supported today ;)

Answer 2

@Jiren The Grey: you should also be careful to specify css property to disabled default behaviour of growing width if content doesn't fit the fixed width (overflow)... and another tricky point is the handling of the 'clear' property wich could cause parent element height to not fit childs content ^^

Answer 3

Hey there. I haven't coded much CSS or HTML but if I understand you I think what you're looking for is to have the nav bar and the one with the icons next to one another, in which case playing around with their layout and lengths, and enclosing both of them in another div element might work out for you. You'll be able to adjust how they relate to one another and their parent div element to get just the layout you're looking for.