Guren Guren - 1 month ago 7
CSS Question

My Navigation Bar folds over itself when the window is resized

This post contains HTML and CSS only.

Hello everyone, I've been coding for a little over a month, however I just can't get enough of it.

So please don't be apalled if you see a huge no-no in that very simplistic code.

I have two issues to handle:


  1. When I resize the window to a smaller size, the navigation bar seems to fold over onto itself. I need for it to be independent of window size. I will provide both HTML and CSS sheets below.

  2. Also, I am using Divs to place content, which in this case are photos... How can I make it so that the div expands with the size of the content?



I guess both questions relate to the same issue; sizing of elements.



* {
border:0px;
margin:0px;
font-family: 'Raleway', sans-serif;
}


}
#wrapper {
width:auto;
height: 100%;
margin:0 auto;
border:1px solid #ccc;
}
#header {
height:15%;
border: 1px solid #eee;
background-color: rgb(255, 255, 255);

}

h1 {
font-size: 60px;
position:relative;
left:50px;
}


h6 {
font-size: 15px;
position:relative;
left:60px;
padding-bottom: 10px;
}

#nav {
height:50px;
width:100%;
background-color: rgb(255, 255, 255);
font-size: 20px;
}


ul {
width:100%;
padding:10px;
border: 2px solid #eee;
overflow: hidden;
}

li {
display: inline;
padding: 10px 40px 10px 40px;
border:2px solid #eee;

}

a{
color:black;
text-decoration: none;
}

#content {
width:100%;
}
#main_content{
width:85%;
float:left;
height: 100%;
border:1px solid #eee;
}
#container_one{
position:relative;
left:20px;
top:20px;
}

#container_two{
position:relative;
left:600px;
top:-337px;
}

#sidebar_one{
width:5%;
background-color: rgb(255, 255, 255);
min-height: 40%;
float:right;
}
#footer {
height:10%;
width:100%
background-color: rgb(255, 255, 255);
border:1px solid #eee;
font-size: 10px;
clear: both;
}
.clear {
clear:both;
}

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!--DOCKMANN CORP. 10/6/16-->
<title>DOCKMANN</title>



</head>
<body>
<div id="wrapper">
<div id="header">

</div>
<a href="http://dockmann.com"><H1>DOCKMANN</H1></a>
<h6>Find your balance</h6>
</div> <!--END OF HEADER-->

<div id="nav">
<ul>

<li>
<a href="http://dockmann.com">HOME</a>
</li>

<li>
<a href="photo.html">PHOTO</a>
</li>

<li>
<a href="film.html">FILM</a>
</li>

<li>
<a href="social.html">SOCIAL</a>
</li>

<li>
<a href="contact.html">CONTACT</a>
</li>

</ul>
</div> <!--END OF NAV-->

<div id="content">
<div id="main_content">
<h3>Photo content</h3>

<div id="container_one">
<a href="https://www.instagram.com/p/BLMwFmwDcpk/?taken-by=dockmann_com"><img src="/dk_images/R1 500-333.jpg"/></a>
<br />
001 Roxanne
</div> <!--CONTAINER_ONE END-->


<div id="container_two">
<a href="https://www.instagram.com/p/BLMwJyvjVWr/?taken-by=dockmann_com"><img src="/dk_images/R2 500-333.jpg"/></a>
<br />
002 Roxanne
</div>

</div> <!--END OF MAIN CONTENT-->


<div id="sidebar_one">

</div> <!--END OF 1_SIDEBAR-->

<div class="clear"></div>
</div> <!--END OF CONTENT-->

<div id="footer">

DOCKMANN CORP. All Rights Reserved. 2016

</div> <!--END OF FOOTER-->


</div> <!--END OF WRAPPER-->

</body>


</html>




Answer

It's because you're giving your #nav 100%. So it will be dynamic to window width. Put some static value like 980px, 1000px, etc. Or you can put a min-width on it.

For the second problem. Your #main_content needs to be 100% width.

* {
  border: 0px;
  margin: 0px;
  font-family: 'Raleway', sans-serif;
}


}
#wrapper {
  width: auto;
  height: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
}
#header {
  height: 15%;
  border: 1px solid #eee;
  background-color: rgb(255, 255, 255);
}
h1 {
  font-size: 60px;
  position: relative;
  left: 50px;
}
h6 {
  font-size: 15px;
  position: relative;
  left: 60px;
  padding-bottom: 10px;
}
#nav {
  height: 50px;
  width: 980px;
  background-color: rgb(255, 255, 255);
  font-size: 20px;
}
ul {
  width: 100%;
  padding: 10px;
  border: 2px solid #eee;
  overflow: hidden;
}
li {
  display: inline;
  padding: 10px 40px 10px 40px;
  border: 2px solid #eee;
}
a {
  color: black;
  text-decoration: none;
}
#content {
  width: 100%;
}
#main_content {
  width: 85%;
  float: left;
  height: 100%;
  border: 1px solid #eee;
}
#container_one {
  position: relative;
  left: 20px;
  top: 20px;
}
#container_two {
  position: relative;
  left: 600px;
  top: -337px;
}
#sidebar_one {
  width: 5%;
  background-color: rgb(255, 255, 255);
  min-height: 40%;
  float: right;
}
#footer {
  height: 10%;
  width: 100% background-color: rgb(255, 255, 255);
  border: 1px solid #eee;
  font-size: 10px;
  clear: both;
}
#main_content {
  width: 100%;
}
.clear {
  clear: both;
}
<div id="wrapper">
  <div id="header">

  
  <a href="http://dockmann.com"><H1>DOCKMANN</H1></a>
  <h6>Find your balance</h6>
  </div>
<!--END OF HEADER-->

<div id="nav">
  <ul>

    <li>
      <a href="http://dockmann.com">HOME</a>
    </li>

    <li>
      <a href="photo.html">PHOTO</a>
    </li>

    <li>
      <a href="film.html">FILM</a>
    </li>

    <li>
      <a href="social.html">SOCIAL</a>
    </li>

    <li>
      <a href="contact.html">CONTACT</a>
    </li>

  </ul>
</div>
<!--END OF NAV-->

<div id="content">
  <div id="main_content">
    <h3>Photo content</h3>

    <div id="container_one">
      <a href="https://www.instagram.com/p/BLMwFmwDcpk/?taken-by=dockmann_com"><img src="/dk_images/R1 500-333.jpg" /></a>
      <br /> 001 Roxanne
    </div>
    <!--CONTAINER_ONE END-->


    <div id="container_two">
      <a href="https://www.instagram.com/p/BLMwJyvjVWr/?taken-by=dockmann_com"><img src="/dk_images/R2 500-333.jpg" /></a>
      <br /> 002 Roxanne
    </div>

  </div>
  <!--END OF MAIN CONTENT-->


  <div id="sidebar_one">

  </div>
  <!--END OF 1_SIDEBAR-->

  <div class="clear"></div>
</div>
<!--END OF CONTENT-->

<div id="footer">

  DOCKMANN CORP. All Rights Reserved. 2016

</div>
<!--END OF FOOTER-->


</div>
<!--END OF WRAPPER-->

Comments