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.

closed as off-topic by Mark Kaplun, fuxia May 4 '17 at 20:05

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


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 – Mark Kaplun May 4 '17 at 12:15
  • Thank you, so fast and correct. Please could you explain to me the background of this correction? – Karel May 4 '17 at 12:23

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