+ 1

HTML/CSS Question based on <hr> element and floating

Alright, so I'm back with another nerve racking issue that I just can't seem to figure out. I am working on a website with a sidebar, so I set the sidebar to float: left, and I also set the main body to float: left... because without float: left the margins wouldn't move. However, floating an element left automatically sets its element size to only around the element, not across the entire width of the screen. So, because of that, my <hr> element will ONLY take up the size of the Element and won't take up the width of the full screen. I would like help on this matter... http://prntscr.com/e8t6op this is what I am talking about, for visual purpose.

html css

14th Feb 2017, 9:50 PM

Scarlet Red

5 Answers

+ 1

@CipherFox Haha I dont think so because width:100% bases it on the parent element. its already based on the parent element at 100% by default.

15th Feb 2017, 1:58 AM

Scarlet Red

+ 1

An <hr> at 100%(default) will only stretch as far as the parent element that it is contained in minus the parent elements padding. So if you want it to go the full width using an hr you need to use a negative margin on the side(s) in which you want to extend it out passed this point. You can do the math by adding the width of the padding + margin + border etc of the containing elements and any elements that you want it to overlap to get to the edges. <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body { margin: 0; padding: 0; } div { margin: 10px; padding: 10px; } #outer { background: blue; } #inner { background: orange; } hr { margin: 0 -40px; } </style> </head> <body> <div id="outer"> <div id="inner"> <hr/> </div> </div> </body> </html>

15th Feb 2017, 3:42 AM

ChaoticDawg