css - Margin appearing when page is wide -
i'm new web design , have encountered problem margins. things work when page small, when increase width margin appears between main , right column divs. (red , green)
here in jsfiddle: https://jsfiddle.net/jcn2ds03/
here's css:
#container { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; overflow: hidden; max-width: 50000px; min-width: 500px; } #container .inner { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; /* dimensions */ min-width:700px; } #right-column { /* padding , 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 , margin */ padding: 0px; margin: 0px; border: 0px; } #right-column li { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; text-align: center; list-style-type: none; } #main { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; /* dimensions */ width: 85%; min-width: 500px; height: 1000px; background: red; } #header { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; /* dimensions */ width: 100%; height: 300px; /* colors */ background-color: #eeeeee; } #footer { /* padding , margin */ padding: 0px; margin: 0px; border: 0px; height: 300px; }
and 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 few pictures:
get rid of width: 85%;
in #main
. fiddle: https://jsfiddle.net/4fe8bkyf/
Comments
Post a Comment