Full screen width header in html/css
Question
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.
Thanks for your help!
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: #2B8AFF 3px solid; display: table-cell; vertical-align: middle; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } header li { float: left; display: inline; vertical-align: top; padding: 0 20px 0 20px; } header #branding { width: 20%; float: left; padding-top: 0px; padding-bottom: 20px; } header #home img { width: 100%; height: 100%; } header nav { float: right; margin-top: 20px; }
<header> <div class="container"> <div id="branding"> <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a> </div> <nav> <ul> <li><a href="page1.html">Content1</a></li> <li><a href="page2.html">Content2</a></li> <li><a href="page3.html">Content3</a></li> </ul> </nav> </div> </header>
3 answers
solution1
1 ACCPTED 2019-10-02 11:28:42
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:#2B8AFF 3px solid; } header a{ color:#ffffff; text-decoration:none; text-transform: uppercase; font-size:16px; } header li{ float:left; display:inline; vertical-align:top; padding: 0 20px 0 20px; } header #branding{ width:20%; float:left; padding-top:0px; padding-bottom:20px; } header #home img{ width:100%; height:100%; } header nav{ float:right; margin-top:20px; }
<body> <header> <div class="container"> <div id="branding"> <a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a> </div> <nav> <ul> <li><a href="page1.html">Content1</a></li> <li><a href="page2.html">Content2</a></li> <li><a href="page3.html">Content3</a></li> </ul> </nav> </div> </header> </body>solution2
1 2019-10-02 12:01:51
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.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
@media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
@media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
solution3
0 2019-10-02 11:27:45
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.