html - Responsive Design - Columns Not Staying Within Div Tag -
i'm creating generic responsive web page 3 columns supposed contained within div tag. unfortunately, page looks right now: 
as can see, 3 columns (content 1, content2, , content 3) should contained within red "3 column layout" section, this:
this second image class project working on, when tried copy , paste code, went sh*t. provide code both of these pages.
here code first image (the 1 i'm trying fix):
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>resposnive layouts</title> <link href="layout1.css" type="text/css" rel="stylesheet"> </head> <body> <div id="container"><!--opens container--> <header> <h2>header</h2> </header> <nav id="skipto"> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> <li><a href="#">link 4</a></li> </ul> </nav> <div class="banner"> </div><!--closes banner--> <article> <h2>article</h2> </article> <aside> <h2>aside</h2> </aside> <div class="clearfix"> </div> <!-- 3 column layout --> <div class="content"> <h2>3 column layout</h2> <div class="leftcol"> <h4>content 1</h4> </div><!--closes leftcol--> <div class="rightcol"> <h4>content 3</h4> </div><!--closes rightcol--> <div class="midcol"> <h4>content 2</h4> </div><!--closes midcol--> </div> <footer> <h2>footer</h2> </footer> </div><!--closes container--> </body> </html> css:
html{overflow:scroll}/*for tablets , phones*/ /*global styles*/ #container {height:10em; margin:auto; max-width:1000px; width:100%} header {width:100%; height:25px; background-color:red; margin-bottom:15px;} nav ul{list-style-type: none; margin: 0; padding: 0; text-decoration:none; text-align:center; margin-bottom:15px;} nav ul li{display:inline; margin-left:15px;} h2 {text-align:center;} h4 {display: block;} article{width:45%; margin-right:5%; float:left; height:500px; background-color:green;} aside{width:45%; float:right; height:500px; background-color:green;} .clearfix{clear:both;} footer {width:100%; height:25px; background-color:red; margin-bottom:15px; clear:both;} .content{width:auto; height:auto; clear:both; background-color:red;} .leftcol{margin:2% 0 0 1%; width:30%; float:left;} .midcol{width:30%; margin-left:35%;} .rightcol{width:30%; float:right;} /*media query phone*/ @media screen , (max-width:480px) { #skipto{display:block;} header nav, #main, aside, article{ float:left; clear:left; width:100%; margin:0 0 1% 1%;} header nav ul li{margin:0; background-color:#efefef; display:block; margin-bottom:3px; margin-left:0px;} header nav a{display:block; padding:10px 0; text-align:center;} .leftcol{margin:0 0 0 0; width:100%; clear:left;} .midcol{margin:0 0 0 0; width:100%; clear:both;} .rightcol{margin:0; width:100%; clear:both;} }/*closes media query*/ here code second image (the 1 that's working properly).
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>responsive design</title> <meta name="viewport" content="width=device-width, minimum scale=1.0, maximum scale=1.0"/> <link href="main.css" type="text/css" rel="stylesheet"/> <script src="index.js"></script> </head> <body> <div id="wrapper"> <header> <nav id="skipto"> <ul> <li><a href="#main" title="skip main content"> skip main content</a> </li> </ul> </nav> <h1>logo</h1> <nav> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </nav> <div id="banner"> <img src="images/dogs.jpg" alt="dogs"/> </div><!--closes banner--> </header> <!--2 column layout--> <section id="main"> <h1>section</h1> </section> <aside> <h1>aside</h1> </aside> <div class="clearfix"> </div> <!--3 column layout--> <div class="content"> <div id="middlecolumnleft"> <h4>content 1</h4> </div><!--close middlecolumnleft--> <div id="middlecolumnright"> <h4>content 2</h4> </div><!--close middlecolumnmid--> <div id="middlecolumnmid"> <h4>content 3</h4> </div><!--close middlecolumnright--> </div><!--close content--> <div class="clearfix"> </div> <!--hamburger menu--> <nav class="desktop"> <a href="#">desktop 1</a> <a href="#">desktop 2</a> <a href="#">desktop 3</a> <a href="#">desktop 4</a> </nav> <nav class="mobile"> <button>toggle</button> <div> <a href="#">mobile 1</a> <a href="#">mobile 2</a> <a href="#">mobile 3</a> <a href="#">mobile 4</a> </div> </nav> <article> <h1>basic hamburger menu</h1> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. porro quasi sint error perspiciatis quis rem nisi reiciendis doloribus cumque aliquid molestiae quos sed ex commodi ad eveniet asperiores distinctio vero. </p> </article> <!--end hamburger menu--> <footer> <p>©2016</p> </footer> </div><!--closes wrapper--> </body> </html> css:
html{overflow:scroll}/*for tablets , phones*/ /*global styles*/ body{background-color:#ccc; font-size:1.1em; color:#666; font-family:arial, sans-serif; line-height:1.4em;} h1{margin-bottom:10px; color:#111;} a:link{border:none; color:#000; font-weight:bold; text-transform:uppercase;} p {margin:0 0 10px; font-size:1.2em; header,main,footer,nav,section,aside(display:block;)} /*displays vertically*/ img{width:auto; height:auto; max-width:100%;} /*structure desktop layout*/ #wrapper{width:100%; max-width:1000px; margin:auto; padding:2%;} /*logo*/ header{width:auto;} header h1{height:75px; width:16%; float:left; display:block;} header nav {float:right; margin-top:40px;} header nav ul{list-style-type:none;} header nav ul li{display:inline; margin-left:15px;} #skipto{display:none;} #skipto ul{list-style-type:none;} #skipto ul li{background-color:#b1ffcc;} /*main content*/ #main{width:60%; margin-right:5%; float:left; height:500px; background-color:green;} aside{width:35%; float: right; height: 500px; background-color:green;} #banner{float:left; margin-bottom:15px; width:100%;} #banner img{width:100%; width:auto;} .clearfix{clear:both;} /*3 column layout*/ .content{height:auto; width:100%; padding:20px 0; clear:both;} #middlecolumnleft{float:left; width:30%; margin-left:1%; height:200px; border:thick solid #000;} #middlecolumnright{float:right; width:30%; margin-right:1%; height:200px; border:thick solid #000;} #middlecolumnmid{margin-left:35%; width:30%; height:200px; border:thick solid #000;} /*footer*/ footer{font-size:0.8em; padding-left:1%; height:25px;} /*media query phone*/ @media screen , (max-width:480px) { #skipto{display:block;} header nav, #main, aside{ float:left; clear:left; width:100%; margin:0 0 1% 1%;} header nav ul li{margin:0; background-color:#efefef; display:block; margin-bottom:3px; margin-left:0px;} header nav a{display:block; padding:10px 0; text-align:center;} .content{padding-top:5px; margin:0; background-color:red;} #middlecolumnleft{ margin:2% 0 0 1%; width:100%; clear:left;} #middlecolumnright{ margin:2% 0 0 1%; width:100%; clear:both;} #middlecolumnmid{ margin:2% 0 0 1%; width:100%; clear:both;} }/*closes media query*/ /*hamburger menu*/ html { height: 2000px;} .mobile { display: none; position: fixed; width: 100%; top: 0;} .mobile div { display: none;} .mobile button { position: absolute; top: 15px; right: 15px; border: 0; text-indent: 200%; overflow: hidden; background: rgba(255,255,255,0.8) url("http://i.imgur.com/vkrakdx.png") center no-repeat; border: 1px solid #ddd; border-radius: 3px; background-size: 80%; width: 30px; height: 30px; outline: none; -webkit-transition: 400ms ease; transition: 400ms ease;} .mobile button.expanded { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: transparent; border: 0;} .mobile { display: block;} { background: #eee; text-align: center; padding: 20px 0; border-bottom: 1px solid #ddd; text-decoration: none; color: #222; font-weight: bold;} a:hover, a:active, a:focus { background: #e7e7e7;} .desktop { display: block; overflow: hidden;} .desktop { width: 25%; float: left; border-right: 1px solid #ddd; box-sizing: border-box;} .desktop a:last-child { border-right: none;} article { padding: 0 30px 15px;} @media (max-width: 800px) { .mobile { display: block;} .desktop { display: none;} } /*end hamubrger menu*/ don't worry hamburger menu - don't need project. if think can find solution i'd appreciate help, don't spend time if not. friend , have spent day trying fix it. thank you!
edit: when collapsed, page should this:
instead, looks this:
add <div class="clearfix"></div> @ bottom of <div class="content">, before closing tag.
correct html:
<!--3 column layout--> <div class="content"> <div id="middlecolumnleft"> <h4>content 1</h4> </div><!--close middlecolumnleft--> <div id="middlecolumnright"> <h4>content 2</h4> </div><!--close middlecolumnmid--> <div id="middlecolumnmid"> <h4>content 3</h4> </div><!--close middlecolumnright--> <div class="clearfix"> </div> </div><!--close content--> css
.clearfix { clear: both; }
Comments
Post a Comment