-1

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.

Improve this question

1 Answer 1

Reset to default
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

Improve this answer
2
  • 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, 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.