user1063287 February 2016

Why is a 95% width h1 not as wide as a 95% fixed div?

Short Version

Why is a 95% width h1 not as wide as a 95% fixed div?

And what can I do to make the h1 the same width (whilst maintaining the fixed property of the div)?

#mobile_wrapper {
  background: #000;
  display: block;
  position: fixed;
  width: 95%;
  white-space: nowrap;
  z-index: 5;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
#mobile_menu {
  background: aqua;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: 60px;
}
#mobile_logo {
  background: red;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: calc(100% - 120px);
  text-align: center;
}
#mobile_logo img {
  max-width: 100%;
  vertical-align: bottom;
}
#mobile_cart {
  width: 60px;
  background: green;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: right;
}
#mobile_cart li {
  display: inline;
  list-style: none;
}
h1 {
  width: 95%;
  background: gold;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
}
<div id="mobile_wrapper">
  <div id="mobile_menu">
    menu
  </div>
  <div id="mobile_logo">
    <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">
  </div>
  <ul id="mobile_cart">
    <li>i</li>
    <li>i</li>
  </ul>
</div>
<h1>
TITLE
</h1>

jsFiddle

Answers


Qwertiy February 2016

First is positioned relatively to html and second to body. The fix is:

body {
  margin: 0;
}

body {
  margin: 0;
}

#mobile_wrapper {
  background: #000;
  display: block;
  position: fixed;
  width: 95%;
  white-space: nowrap;
  z-index: 5;
  box-sizing: border-box;
  top: 0;
  left: 0;
}
#mobile_menu {
  background: aqua;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: 60px;
}
#mobile_logo {
  background: red;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  width: calc(100% - 120px);
  text-align: center;
}
#mobile_logo img {
  max-width: 100%;
  vertical-align: bottom;
}
#mobile_cart {
  width: 60px;
  background: green;
  float: left;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-align: right;
}
#mobile_cart li {
  display: inline;
  list-style: none;
}
h1 {
  width: 95%;
  background: gold;
  display: inline-block;
  position: static;
  box-sizing: border-box;
  margin-top: 50px;
  text-align: center;
}
<div id="mobile_wrapper">
  <div id="mobile_menu">
    menu
  </div>
  <div id="mobile_logo">
    <img src="http://lorempixel.com/image_output/technics-q-c-150-50-6.jpg">
  </div>
  <ul id="mobile_cart">
    <li>i</li>
    <li>i</li>
  </ul>
</div>
<h1>
TITLE
</h1>


David February 2016

Try adding this to the body element.

body {
    width:100%;
}


Chuck Le Butt February 2016

It's because the mobile_wrapper has position: fixed:

https://jsfiddle.net/az77u8c8/

You also haven't cleared your floats. There should be a block element with clear: both.


JamieC February 2016

It's nothing to do with using div vs h2 elements. It's because your div is using fixed positioning. % values for a position: fixed element are calculated as a % of the viewport (e.g. normally the browser width, but in your js fiddle the frame).

Your H1 tag is static position, so a percentage width based on the width of it's container, in this case the body. You might think that the body will be the same width as the viewport, but most browsers add some padding/margin to the body.

If you select the 'normalize css' option in jsfiddle, this probably gives the result you were expecting.

https://jsfiddle.net/4hnn3skv/

This uses normalize.css to enforce consistent behaviour cross browser. It's usually a good idea to use this or a css reset.


vahid heidarinezhad February 2016

width:95%
It gives same result for h1 and div

<html>
<head>
	<title></title>
</head>
<style type="text/css">
 
 
 .TT{
 width:95%;
 background-color:red;
}
</style>
<body>
  <div id="d1" class="TT">m</div>
  <h1 id="hh" class="TT">m</h1>
</body>
</html>

Post Status

Asked in February 2016
Viewed 3,901 times
Voted 7
Answered 5 times

Search




Leave an answer