omnipotato omnipotato - 6 months ago 16
HTML Question

How to make hr tag extend the full width of screen

I'm trying to have a div that has a max width for all its child elements except for hr, so it will extend the full width of the screen. This is what I have right now that's not working:

#content :not(hr){
margin-left: auto;
margin-right: auto;
max-width: 250px;
}

#content hr{
height: 1px;
color: #d3d3d3;
}
#container{
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -138px;
}


And in the html:

<html>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
...
<hr />
...
</div>
</div>
</body>
</html>

Answer

Perhaps not the most elegant, but this may work for what you need:

Demo Fiddle

Just make the hr wider than the window, and give it enough negative margin to roughly center it. Setting overflow to hidden gets rid of the excess.

CSS:

/* new css */
#container {overflow: hidden;}

#content hr {
    width: 1000%;
    margin-left: -500%;
}

/* old css */
#content:not(hr){
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
}

#content hr{
  height: 1px;
  color: #d3d3d3;
}
#container{
  min-height:100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -138px;
}