How do I create a header style which spans from left most end to right end of the screen irrespective of screensize?

73 Views Asked by IndiGo At 30 May 2020 at 06:34

I want to Stretch this BLUE BAR, from one end of the screen to the other end. Now it is stretching 980px. Depending upon the screen size it should span itself from one end to the other end.

If I increase 980px, allignment will change. How to make the bar responsive ?

What CSS should I use ?

html {
  height: 100%;
  width: 100%;
}

body {
  height: 980px;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 980px;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0B61A5;
  color: white;
}

navigation {
  width: 980px;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 980px;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

footer {
  width: 940px;
  height: 20px;
  margin: 0 0 10px 0;
  padding: 10px 20px;
  background: #0B61A5;
  color: white;
}

  
<html>
 <body>
     
  <header>
   <h1>OEMS User Area</h1>
  </header>
  
  <navigation>
   <ul>
    <li>User: </li>
    <li> <a href="">Home</a> </li>
    <li> <a href="">Logout</a> </li>
   </ul>
  </navigation>
  
  <footer> O.E.M.S </footer>
  
 </body>
</html>

Original Q&A

There are 2 best solutions below

kokila On 30 May 2020 at 06:43

You should use width:100% to stretch the header to full width for any device size. If you want other design for the different device sizes, use media queries. Learn more about responsive design at https://www.w3schools.com/css/css_rwd_mediaqueries.asp

body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

header {
 width: 100%;
 height: 40px;
 margin: 0 0 10px 0;
 padding: 0;
 background: #0B61A5;
 color: white;
}

Tom Tom On 30 May 2020 at 06:56

Try this, it will stretch the bars. And put the content of your page in the .wrapper section, it will be 980px and centered

html {
 
  width: 100%;
}

body {
   
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0;
  background: #0B61A5;
  text-align: center;
  color: white;
}

navigation {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

navigation ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

navigation ul li {
  display: inline;
  margin-right: 1em;
}

footer p {
   padding: 10px 20px;
}
footer {
  width: 100%;
  height: 40px;
  margin: 0 0 10px 0;
  padding: 0px;
  background: #0B61A5;
  color: white;
}
.wrapper {
   min-height: 900px;
   width: 980px;
   margin: auto;
   display: block;
}

<html>
 <body>
     
  <header>
   <h1>OEMS User Area</h1>
  </header>
  <navigation>
   <ul>
    <li>User: </li>
    <li> <a href="">Home</a> </li>
    <li> <a href="">Logout</a> </li>
   </ul>
     </navigation>
  <section class='wrapper'>
      THE CONTENT GOES HERE !
        </section>
  <footer><p> O.E.M.S </p></footer>      
 </body>
</html>

How do I create a header style which spans from left most end to right end of the screen irrespective of screensize?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in RESPONSIVE-DESIGN

Related Questions in RESPONSIVE

Related Questions in STYLESHEET

Trending Questions

Popular # Hahtags

Popular Questions