CODEWITHSUNDEEP
css
Brokndremes
Brokndremes

Reputation: 49

Margin appearing when page is wide

I'm fairly new to web design and have encountered a problem with margins. Things work when the page is fairly small, but when I increase the width margin appears between the main and right column divs. (Red and Green)

Here it is in jsfiddle: https://jsfiddle.net/jcn2ds03/

Here's my css:

#container { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;


  overflow: hidden; 
  max-width: 50000px; 
  min-width: 500px; 
}

#container .inner { 
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  min-width:700px;
}

#right-column {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border-left: 5px solid #E3E3E3;


  float: right;
  width: 200px;
  height: 1000px;
  background: green;

}
#right-column h2 {
  text-align: center;

}
#right-column u1 {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#right-column li {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  text-align: center;
  list-style-type: none;
}

#main {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  width: 85%;
  min-width: 500px;
  height: 1000px;

  background: red;
}

#header {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  /* Dimensions */
  width: 100%;
  height: 300px;

  /* Colors */
  background-color: #EEEEEE;
}

#footer {
  /* padding and margin */
  padding: 0px;
  margin: 0px;
  border: 0px;

  height: 300px;
}

and the html

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="style2.css" />
  </head>
  <body>
    <div id="container">
      <div id="header">

      </div><!-- #header End -->
      <div class="inner">
        <div id="right-column">
          <h2><a href="">Main Link</h2>
          <u1>
            <li><a href="">link1</a></li>
            <li><a href="">link2</a></li>
            <li><a href="">link3</a></li>
            <li><a href="">link4</a></li>
          </u1>
        </div><!-- #right-column End -->
        <div id="main">

        </div><!-- #main End -->
      </div> <!-- .inner End -->
    </div> <!-- #Container End -->
    <div id="footer">

    </div> <!-- #footer End -->
  </body>
</html>

And a few pictures:

All Good: http://gyazo.com/8bd7a80d9596e126f6477aec75c54f3e

Too Wide: http://gyazo.com/12fdaf65c69ff35d8ce721689f4ad235

Upvotes: 0

Views: 18

Answers (1)

Zack Tanner
Zack Tanner

Reputation: 2590

Get rid of width: 85%; in #main. Fiddle: https://jsfiddle.net/4fe8bkyf/

Upvotes: 1

Related Questions