Geek Answers Handbook

Br clear = "all" vs css solution

I have a div that is float: left, and after the div is the rest of the page. To leave the rest of the page below the div, I must first place

<br clear="all">

Q: How to place the rest of the page under a floating div? I think I need to wrap the rest of the page in a new div and take a swim. But I try to stay away from the floats as much as I can.

+10
source share
6 answers

In the next element, you can use the clear:left style.

Another alternative is to set the overflow style for the parent of the floating element to contain it, such as overflow:hidden .

+7
source

after you placed the div. add the following code.

 <div style='clear:both'></div>

then continue with the rest of the page as usual.

+19
source

I usually wrap another div around a floating div, with an overflow: auto style

+3
source

Create a class and paste in CSS:

 br.cb { clear: both; }

Embed in HTML:

 <br class="cb">

This made it a past W3 markup and CSS validator.

+1
source 
 <!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="CSS/Homepage.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; padding: 0; background-color: #EFEFEF; font-family: sans-serif; } .homepage-window { height: 100vh; display: flex; } .nav-bar { width: 18%; background-color: #2E3E4E; } .bar-manager { width: 100%; } .top-bar { display: flex; align-items: center; height: 7%; width: 100%; background-color: white; border-bottom: 0.5px solid lightgrey; } .top-bar p { margin-left: 10px; font-weight: lighter; } .bottom-bar { display: flex; flex-direction: column; align-items: center; height: 9%; width: 100%; } .bottom-bar h1 { margin-left: 10px; font-weight: normal; font-size: 12px; } </style> <head> <title>Cold-Ops Homepage</title> </head> <body> <div class="homepage-window"> <div class="nav-bar"> </div> <div class="bar-manager"> <div class="top-bar"> <p>Homepage</p> </div> <div class="bottom-bar"> <h1>Welcome, Omard2000</h1><br> <p>some text</p> </div> </div> </div> </div> </body> </html>
0
source

Note that the clear: property should only work with block level elements in CSS 2+. The above sentence, if it works, is not recommended.

Link: https://www.w3.org/TR/CSS22/visuren.html#flow-control

0
source

More articles:


All Articles