Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Full Screen Width Header In Html/css

Post a Comment
I know this is a common problem, but I can't get my header the same size like my screen. I already tried to wrap the header into another div and make width: 100%. This didn't help.

Solution 1:

Just remove the display:table-cell from the header

body{
  font-family: 'avenirregular';
  padding:0;
  margin:0;
  background-color:#f4f4f4;
  width:100%
}

/* Global */.container{
  width:85%;
  margin:auto;
  overflow:hidden;
}


/* Header **/header{
  background:#16205E;
  color:#ffffff;
  padding-top:30px;
  min-height:7.5vh;
  border-bottom:#2B8AFF3px solid;
 }


headera{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

headerli{
  float:left;
  display:inline;
  vertical-align:top;
  padding: 020px020px;
}

header#branding{
  width:20%;
  float:left;
  padding-top:0px;
  padding-bottom:20px;

}

header#homeimg{
  width:100%;
  height:100%;
}

headernav{
  float:right;
  margin-top:20px;
  
}
<body><header><divclass="container"><divid="branding"><aid='home'href="index.html"><imgsrc='./img/test_logo_v1.svg'</a></div><nav><ul><li><ahref="page1.html">Content1</a></li><li><ahref="page2.html">Content2</a></li><li><ahref="page3.html">Content3</a></li></ul></nav></div></header></body>

Solution 2:

I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.

Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.

Every page must have a wrapper div to wrap all of your html.

Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.

The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)

To get all your elements inline, investigate these functionalities based on what works best for you.

https://www.w3schools.com/css/css_inline-block.asp ->inline-block

and

https://www.w3schools.com/css/css_float.asp ->float

Then apply the appropriate style to your div elements inside the surrounding div.

<divclass="wrapper"><!-- Header Div --><divclass="header"><!-- Your header Content goes here --></div><!-- Body Div --><divclass="body box-width"><!-- Your body Content goes here --><!-- This body will be box width -> 1200px --></div><divclass="body-2"><!-- Your body Content goes here --><!-- This body will be full width --></div><!-- Footer Div --><divclass="footer"><!-- Your footer Content goes here --></div></div><styletype="text/css">@mediaonly screen and (min-width: 1024px) {
        .wrapper{
            width: 100%;
            max-width: 100%;
        }
        .box-width{
            width: 1200px;
            max-width: 100%;
            margin: 0px auto;
        }
    }
    @mediaonly screen and (max-width: 1023px) {
        .box-width {
            max-width: 90%;
            margin: 0px auto;
        }
    }
</style>

Solution 3: 

header{
   display:inline-block;
   width:100%;
}

You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.

You may like these posts

Post a Comment for "Full Screen Width Header In Html/css"