CODEWITHSUNDEEP
htmlcssline
Shinji-san
Shinji-san

Reputation: 1001

Horizontal Line which takes up less than 100% width

I know that a border can be used in lieu of the horizontal line tag (hr). However, in this case I don't want the line to take up 100% width; the current div does and so would the border if I were to put a border in.

So I would like to put a horizontal line (hr) in with 80% width but it's not showing up, well specifically the width is not 80%. The place at which I want to insert it is the very first line after the bottom class in my code.

My intention is to put the horizontal line (hr) right above the Cola (<p class="center1">Cola</p>) on the page. Also the styling doesn't seem to work either here for the hr class; trying to put a width and a color on it.

* {
  margin: 0;
}
body {
  background-color: green;
}
html,
body {
  height: 100%;
}
#subnav {
  height: 10%;
  text-align: center;
}
#subnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: red;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
#subnav li {
  display: inline-block;
}
#subnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#subnav li a:hover {
  color: yellow;
}
#subnav li a:active {
  color: yellow;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  min-height: 100vh;
  width: 80%;
  margin: 0 auto;
  background-color: white;
  font-size: 20px;
}
.top {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}
.bottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.bottom {
  flex: 0 0 100%;
  height: 50%;
}
hr.style1 {
  border-top: 1px solid #8c8b8b;
  width: 80%;
}
.top {
  flex: 0 0 100%;
  height: 50%;
}
.topa {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: flex-start;
  margin-left: 3%;
  width: 45%;
  height: 100%;
}
.topb {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  width: 50%;
  height: 100%;
}
li {
  list-style-type: none;
  font-size: 18px;
}
.advisory {
  background-color: white;
  margin: auto;
  width: 100%;
}
#advisory ul li {
  margin-bottom: 2%;
}
.center {
  text-align: center;
}
.center1 {
  text-align: center;
  color: green;
  font-size: 28px;
}
.tpoint {
  font-size: 24px;
  color: orange;
}
<div class="container">
  <div id="subnav">
    <ul>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a class="active" href="#">Corn </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
      <li> <a href="#">Sam </a>
      </li>
    </ul>
  </div>
  <div class="top">
    <div class="topa">
      <img src="ham.jpg" width="209" height="205" alt="Picture of kid" />
      <img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" />
    </div>
    <div class="topb">
      <h2> Sams </h2>
      <p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence
        this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample sentence this Sample
        sentence this Sample sentence this Sample sentence this Sample sentence this</p>
    </div>
  </div>
  <div class="bottom">
    <div class="sam">
      <hr class="style1">
      <p class="center1">Cola</p>
      <p class="center tpoint">Sample</p>
      <ul>
        <li>Sample
          <ul>
            <li>Sample</li>
            <li>rsam</li>
          </ul>
        </li>
        <li>san
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
        <li>sam
          <ul>
            <li>sam</li>
            <li>sam</li>
          </ul>
        </li>
      </ul>
      <p class="center tpoint">The sam</p>
      <ul>
        <li>sam
          <ul>
            <li>sam</li>
          </ul>
        </li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
        <li>sam</li>
      </ul>
      <p class="center tpoint">Eggs</p>
      <ul>
        <li>sam
          <ul>
            <li>san</li>
          </ul>

        </li>
        <li>Eri
          <ul>
            <li>Sam</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Views: 6535

Answers (5)

Vladimir M
Vladimir M

Reputation: 4489

You may modify your CSS as following:

Add width 100% to the class sam:

.sam {
   width: 100%;
}

Add centering to the class style1:

.style1 { 
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 1

Razia sultana
Razia sultana

Reputation: 2211

try it

<hr align="left" width="50%">

Upvotes: 0

Xahed Kamal
Xahed Kamal

Reputation: 2223

The hr is inside .sam div which is not getting full width. That is why you are seeing the hr with small width (but it is taking 80% width).

.sam{
   width:100%
}

This will fix the issue.

Upvotes: 1

Johannes
Johannes

Reputation: 67738

Your hris inside a container that has a smaller width (div .sam), so it's width is 80% of that container. Just move it up in the HTML code, above the .bottom div:

* {
 margin: 0;
}
body {
	background-color: green;
}
html,
body {
	height: 100%;
}

#subnav {
	height: 10%;
	text-align: center;
}
#subnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: red;
	text-align: center;
	width: 100%;
	font-weight: bold;
}
#subnav li {
	display: inline-block;
}
#subnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
#subnav li a:hover {
	color: yellow;
}
#subnav li a:active {
	color: yellow;
}
#bigwrap {
	height: 100%;
}
.container {
    display: flex; 
    position: relative;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch; 
    min-height: 100vh; 
    width: 80%;	
	margin: 0 auto;
	background-color: white;
	font-size: 20px;
}

.top {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;	
}
.bottom {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: flex-start;
}
.bottom {
	flex: 0 0 100%;
	height: 50%;
}
hr.style1{
	border-top: 1px solid #8c8b8b;
	width: 80%;
}
.top {
	flex: 0 0 100%;
	height: 50%;	
}
.topa {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: flex-start;
	margin-left: 3%;
	width: 45%;
	height: 100%;
}
.topb {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	width: 50%;
	height: 100%;
}
	
li {
 list-style-type: none;
 font-size: 18px;
}
.advisory {
	background-color: white;
	margin: auto;
	width: 100%;	
}
#advisory ul li {
	margin-bottom: 2%;
}
.center {
	text-align: center;
}
.center1 {
	text-align: center;
	color: green;
	font-size: 28px;
}
.tpoint {
	font-size: 24px;
	color: orange;
}
<div class="container">
    	<div id="subnav">
           	<ul>
    			<li> <a href="#">Sam </a></li>
        		<li> <a href="#">Sam </a></li>
    			<li> <a class="active" href="#">Corn </a></li>
    			<li> <a href="#">Sam </a></li>
            	<li> <a href="#">Sam </a></li>
                <li> <a href="#">Sam </a></li>
                <li> <a href="#">Sam </a></li>
    		</ul>
       </div>
    	<div class="top">
        	<div class="topa">
   	    		<img src="ham.jpg" width="209" height="205" alt="Picture of kid" /> 
  				<img src="bacon.jpg" width="209" height="205" alt="Picture of kid\" /> 
            </div>        
        	<div class="topb">
            	<h2> Sams </h2>
            	<p>Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this Sample sentence this
                Sample sentence this Sample sentence this Sample sentence this  </p>
        	</div>
        </div>
            	<hr class="style1">
        <div class="bottom">
        	<div class="sam">
           		<p class="center1"> Cola </p>
           		<p class="center tpoint"> Sample </p>
                <ul>
                	<li> Sample
                    	<ul>
                        	<li> Sample </li>
                            <li> rsam </li>                       
                        </ul>
                    </li>
                    <li> san
                    	<ul>
                        	<li> sam </li>
                            <li> sam </li>
                        </ul>
                    </li>
                    <li> sam 
                    	<ul>
                        	<li> sam </li>
                            <li> sam </li>
                        </ul>
                    </li>
                    <li> sam
                    	<ul>
                        	<li> sam </li>
                            <li> sam </li>
                        </ul>
                    </li>
                    <li> sam
                    	<ul>
                        	<li> sam </li>
                            <li> sam </li>
                        </ul>
                    </li>
                </ul>
           <p class="center tpoint"> The sam</p>
                <ul>
                	<li> sam
                    	<ul>
                        	<li> sam </li>
                        </ul>
                    </li>
                    <li> sam  </li>
                    <li> sam </li> 
                    <li> sam </li>
                    <li> sam </li> 
                    <li> sam  </li>
                    <li> sam </li>
                    <li> sam </li>	
                </ul>
                <p class="center tpoint" > Eggs </p>
                <ul>
                	<li> sam 
                    	<ul>
                        	<li> san </li>
                        </ul>
                    
                    </li>
                    <li> Eri
                    	<ul>
                        	<li> Sam </li>
                        </ul>
                    </li>
                </ul>
          </div>
        </div>
 	</div>

Upvotes: 1

Geeky
Geeky

Reputation: 7488

You have mistake in the markup

If you want horizantal line 100% width

change <hr class="style1"> to <hr class="style1"/>

This fixes it

Upvotes: -1

Related Questions