Here you can see the problem with floating:left in my page. I have made a style for wordpress, where I have links to pages and children pages.

The links "PC a internet, Grafika, Programování" should be on the same line (right figure). I have added "float:left" to the style.css and the menu is OK, but unfortunately the Title "PC a internet" has moved one row upward (see the right figure). I don't want to have it there.

Problem with CSS style

The use of float is probably little bit tricky, could somebody give me advice how to correct it?

Thank you.

1 Answer 1


Add clear:both; to your title.

example: https://jsfiddle.net/wap27kuv/

edit: the code is behaving as it should, floated elements will make the sibling elements that has no clear property align to the side of the floated elements. Setting clear:both to your title, stops the floating behavior. You could also use clear:left and it'd work perfectly in this case. This is a brief explanation, you could check this link for more detail about clear/float property with examples: CSS Layout - float and clear

  • if you going to add an answer, make the small effort to explain it, otherwise it is just a blob of code no one can understand when and how to use May 4, 2017 at 12:15
  • Thank you, so fast and correct. Please could you explain to me the background of this correction?
    – Karel
    May 4, 2017 at 12:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.