CODEWITHSUNDEEP
htmlcss
Lee Yip
Lee Yip

Reputation: 13

Stuck with nav html css - how to get it full width

I've got a nav here:

http://tumolo.co.uk/navbar/

I've tried all sorts - but I cant get this nav to fill up the browser 100% width. It has white space on both Left and Right side of the navbar.

I put each nav li to 16% as it's 100% / 6 menu elements, 16% is the closest to get each element equal size. 

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-left: 0px;
  padding-right: 0px;
}
.nav li {
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
.nav a {
  text-decoration: none;
  color: #6b6b6b;
  display: block;
  font-size: 0.8em !important;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #ff0;
  color: #000;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.nav ul li#wind a:hover {
  color: #ffffff;
  background-color: #5da3ab;
}
.nav ul li#wind .active {
  background-color: #5da3ab;
  color: #ffffff;
}
.nav ul li#hmrc a:hover {
  color: #ffffff;
  background-color: #ac5e88;
}
.nav ul li#hmrc .active {
  background-color: #ac5e88;
  color: #ffffff;
}
.nav ul li#cvl a:hover {
  color: #ffffff;
  background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
  color: #ffffff;
  background-color: #5b3e52;
}
.nav ul li#admin a:hover {
  color: #ffffff;
  background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
  color: #ffffff;
  background-color: #7c4c4c;
}
@media screen and (min-width: 600px) {
  .nav li {
    width: 16%;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1em;
    border-right: 1px solid #ebe3e3;
  }
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
  .nav li:last-child {
    border-right: 0;
  }
  /* Options 2 - Float
    .nav li {
    float: left;
    }
    .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
    }
    .nav {
    background-color: #444;
    }
    */
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
  <ul id="navlist">
    <li id="wind"><a href="#">Winding up petition</a>
    </li>
    <li id="hmrc"><a href="#">Cant pay HMRC?</a>
    </li>
    <li id="cvl"><a href="#">CVA</a>
    </li>
    <li id="mvl"><a href="#">MVL</a>
    </li>
    <li id="admin"><a href="#">Administration</a>
    </li>
    <li id="liquid"><a href="#">Liquidation</a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 2057

Answers (4)

user4563161
user4563161

Reputation:

Use CSS table. It behaves much like the flex box but with better support.

It will space out each li equally up and down without the need for the 16% media query.

You will just need to tweak the styling of the links a little to add in your border.

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
.nav ul {
  list-style: none;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-left: 0px;
  padding-right: 0px;
  display:table;
  width:100%;
  table-layout:fixed;
}
.nav li {
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
  display:table-cell;
  vertical-align:top;
  position:relative;
}
.nav a {
  text-decoration: none;
  color: #6b6b6b;
  display: block;
  font-size: 0.8em !important;
  transition: .3s background-color;
}
.nav a:hover {
  background-color: #ff0;
  color: #000;
}
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.nav ul li#wind a:hover {
  color: #ffffff;
  background-color: #5da3ab;
}
.nav ul li#wind .active {
  background-color: #5da3ab;
  color: #ffffff;
}
.nav ul li#hmrc a:hover {
  color: #ffffff;
  background-color: #ac5e88;
}
.nav ul li#hmrc .active {
  background-color: #ac5e88;
  color: #ffffff;
}
.nav ul li#cvl a:hover {
  color: #ffffff;
  background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
  color: #ffffff;
  background-color: #5b3e52;
}
.nav ul li#admin a:hover {
  color: #ffffff;
  background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
  color: #ffffff;
  background-color: #7c4c4c;
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
  <ul id="navlist">
    <li id="wind"><a href="#">Winding up petition</a>
    </li>
    <li id="hmrc"><a href="#">Cant pay HMRC?</a>
    </li>
    <li id="cvl"><a href="#">CVA</a>
    </li>
    <li id="mvl"><a href="#">MVL</a>
    </li>
    <li id="admin"><a href="#">Administration</a>
    </li>
    <li id="liquid"><a href="#">Liquidation</a>
    </li>
  </ul>
</div>

Upvotes: 0

Daniel Hansen
Daniel Hansen

Reputation: 156

If it's not absolutely necessary, I'd ditch display: inline-block; on the .nav li - it messes with width calculations, as you know since you've adjusted for it with the -4px on each, which is only an approximation.

If you float the .nav li left, add box-sizing: border-box; and increase the width to 16.6667%, you'll get total coverage. You'll have to adjust .nav ul to contain it properly, but I've updated the snippet below to show.

body {
    background: #ccc none repeat scroll 0 0;
    margin: 0;
    padding: 0;
}
.nav ul {
    background-color: #fff;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    float: left;
    width: 100%;
}
.nav li {
    border-bottom: 1px solid #888;
    font-size: 1em;
    height: 40px;
    line-height: 40px;
}
.nav a {
    color: #6b6b6b;
    display: block;
    font-size: 0.8em !important;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
}
.nav a:hover {
    background-color: #ff0;
    color: #000;
}
.nav a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
}
.nav ul li#wind a:hover {
    background-color: #5da3ab;
    color: #ffffff;
}
.nav ul li#wind .active {
    background-color: #5da3ab;
    color: #ffffff;
}
.nav ul li#hmrc a:hover {
    background-color: #ac5e88;
    color: #ffffff;
}
.nav ul li#hmrc .active {
    background-color: #ac5e88;
    color: #ffffff;
}
.nav ul li#cvl a:hover {
    background-color: #5e7ea4;
    color: #ffffff;
}
.nav ul li#mvl a:hover {
    background-color: #5b3e52;
    color: #ffffff;
}
.nav ul li#admin a:hover {
    background-color: #7c6e61;
    color: #ffffff;
}
.nav ul li#liquid a:hover {
    background-color: #7c4c4c;
    color: #ffffff;
}
@media screen and (min-width: 600px) {
.nav li {
    border-bottom: medium none;
    border-right: 1px solid #ebe3e3;
    font-size: 1em;
    height: 50px;
    line-height: 50px;
    width: 16.6667%;
    box-sizing: border-box;
    float: left;
}
.nav li:last-child {
    border-right: 0 none;
}
}
<div class="nav"> 
	<ul id="navlist"> 
		<li id="wind"><a href="http://propertycrowdinvestor.com/insolvency/winding-up-petition/">Winding up petition</a></li> 
		<li id="hmrc"><a href="http://propertycrowdinvestor.com/insolvency/cant-pay-hmrc/">Cant pay HMRC?</a></li> 
		<li id="cvl"><a href="http://propertycrowdinvestor.com/insolvency/cvl/">CVA</a></li> <li id="mvl"><a href="http://propertycrowdinvestor.com/insolvency/mvl/">MVL</a></li> 
		<li id="admin"><a href="http://propertycrowdinvestor.com/insolvency/administration/">Administration</a></li> 
		<li id="liquid"><a href="http://propertycrowdinvestor.com/insolvency/liquidation/">Liquidation</a></li> 
	</ul> 
</div>

Upvotes: 1

Matthew Johnson
Matthew Johnson

Reputation: 5165

Flexbox will get you there!

.nav ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

If you're wanting the ends to be flush against the edge, it may be better to use:

justify-content: space-between;

Looking at the existing styles on the element, you can remove the padding-left and padding-right, as mentioned in the comments. Also, with flex, you may want to check out vendor prefixes.

Note: Support for old IE can be shaky.

The above does leave gaps in the header, as also mentioned in the comments. An alternative, suggested by Joe, is:

#navList {
  display:flex;
}
#navList li {
  flex:1 auto;
}

Upvotes: 2

Burak Tokak
Burak Tokak

Reputation: 1860

What I understand from your explanation, you are trying to make a header navigation that has 100% width and the nodes of the menu will have the same width;

You should use calc() let me give you an example and you can apply that to your code;

<div class="nav">
   <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
   </ul>
</div>

Also in your CSS;

.nav { height:30px; width:100%; 
  border-bottom:1px solid #000;}
.nav li { 
  width:calc(100% / 4); 
  list-style: none; 
  text-align:center;
  float:left;
}

We divided %100 to 4 because we have 4 li elements in our navigation.

Check on jsfiddle: https://jsfiddle.net/d9b1re2p/1/

Hoping that would help, please post your code as it is simplified in your question with a better explanation next time.

Upvotes: 0

Related Questions