CODEWITHSUNDEEP
htmlcss
naufragio
naufragio

Reputation: 73

Undesired effect on a nav bar when resizing .container width

I'm a beginner and i'm doing this exercise where I have to create a top nav bar.

This is my work in progress: https://jsfiddle.net/naufragio/kscty1zh/ (can you see it?). Basically it's just a navigation bar with some elements floated left, other right and a logo in the middle.

And this is the problem:

If in the CSS rules in the .container selector I change the width property from 100% (current value) to 80% then all the elements are adjusted accordingly as I want, apart from the elements floated at the right of the bar, that don't adjust accordingly.

Is it related with the floating and clearing? I'm not figuring out how to get out from this situation...

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  margin: auto;
  width: 100%
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
  font-weight: bold;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.imgheader {
  text-align: center;
  padding-top: 0.5%;
}

.navheader {
  border: 1px solid rgba(0, 0, 0, 0.3);
  height: 50px;
}

.buttonheader1 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  margin-right: 80px;
  clear: both;
}

.buttonheader2 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  clear: both;
}

.buttonleft {
  margin: 10px;
  padding: 8px 10px;
  background-color: white;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: black !important;
  font-weight: bold;
}
<body>
  <div class="container">
    <div class="nav">
      <div class="navheader">

        <div class="leftheader">
          <ul>
            <li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
            <li style="float:left"><a href="#home">HOME</a></li>
            <li style="float:left"><a href="#news">SEARCH</a></li>
          </ul>
        </div>
        <div class="rightheader">
          <ul>
            <li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
            <li style="float:right"><button class="buttonheader2" type="button">SUBSCRIBE</button></li>
          </ul>
        </div>
        <div class="imgheader">
          <img src="logo.png" alt="logo">
        </div>
      </div>
      <div class="navarticles">
      </div>
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
  </div>
</body>

Upvotes: 0

Views: 42

Answers (2)

Tom M
Tom M

Reputation: 2904

  1. replace position: fixed with position: absolute for your .container.
  2. give position: relative; to your navheader

position: fixed is always the viewport which is why it will not stay inside your .navheader. However, if you give it position: absolute, it's position will be determined by the next parent container that has position: relative

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  margin: auto;
  width: 100%
}

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

li {
  float: left;
  font-weight: bold;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.imgheader {
  text-align: center;
  padding-top: 0.5%;
}

.navheader {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.3);
  height: 50px;
}

.buttonheader1 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  margin-right: 80px;
  clear: both;
}

.buttonheader2 {
  margin: 10px;
  padding: 8px 10px;
  background-color: #6288A5;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: #fff;
  clear: both;
}

.buttonleft {
  margin: 10px;
  padding: 8px 10px;
  background-color: white;
  border: 1px solid #4D7B9F;
  border-radius: 3px;
  color: black !important;
  font-weight: bold;
}
<body>
  <div class="container">
    <div class="nav">
      <div class="navheader">

        <div class="leftheader">
          <ul>
            <li style="float:left"><button class="buttonleft" type="button">SECTIONS</button></li>
            <li style="float:left"><a href="#home">HOME</a></li>
            <li style="float:left"><a href="#news">SEARCH</a></li>
          </ul>
        </div>
        <div class="rightheader">
          <ul>
            <li style="float:right"><button class="buttonheader1" type="button">LOG IN</button></li>
            <li style="float:right"><button class="buttonheader2" type="button">SUBSCRIBE</button></li>
          </ul>
        </div>
        <div class="imgheader">
          <img src="logo.png" alt="logo">
        </div>
      </div>
      <div class="navarticles">
      </div>
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
  </div>
</body>

See: https://jsfiddle.net/3ajch21r/2/

Upvotes: 0

Arthur
Arthur

Reputation: 5148

I think this is because your .container child ul is position:fixed and so have width reference to the document and not his parent. If you update also the ul width to 80% it's working fine.

Upvotes: 0

Related Questions