search

codyhouse / responsive-sidebar-navigation

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.
https://codyhouse.co
112 stars 68 forks source link

Can't use float clearing in main content area #1

Closed melonfarmermike closed 6 years ago

melonfarmermike commented 6 years ago

If you try to use a clear="all" or clear="left" in the main content section then any content after that disappears until you try to scroll down the page. If the page content doesn't extend pass the bottom of the screen then you'll never be able to see it.

Add the following to a page to test:-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

< br clear="both"/ >

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

sebastiano-guerriero commented 6 years ago

you can fix this by removing the floating on the sidebar (that is causing the issue with the clear:both) and adding a display: flex to .cd-main-content so that sidebar and content are on the same row. You should also add a flex-shrink: 0; to the sidebar otherwise it will shrink.