CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queriesmultiple-columns
HappyHands31
HappyHands31

Reputation: 4101

Responsive Design - Columns Not Staying Within Div Tag

I'm creating a generic responsive web page where three columns are supposed to be contained within a div tag. Unfortunately, this is what the page looks like right now: enter image description here

As you can see, the three columns (Content 1, Content2, and Content 3) should be contained within the red "3 Column Layout" section, like this:

enter image description here

This second image is from a class project I was working on, but when I tried to just copy and paste the code, everything went to sh*t. I will provide you with the code for both of these pages.

Here is my code for the first image (the one I'm trying to 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 and 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 for phone*/
@media screen and (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 is the code for the second image (the one 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 to main content">
Skip to 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>&copy;2016</p>
</footer>

</div><!--closes wrapper-->
</body>
</html>

CSS: 

html{overflow:scroll}/*for tablets and 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 for 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 for phone*/
@media screen and (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: all 400ms ease;
 transition: all 400ms ease;}

 .mobile button.expanded {
 -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
 background-color: transparent;
 border: 0;}

.mobile a {
display: block;}

a {
 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 a {
  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 about the hamburger menu - I don't need it for this project. If you think you can find a solution quickly then I'd appreciate your help, but don't spend too much time with this if not. My friend and I have already spent all day trying to fix it. Thank you!

EDIT: When collapsed, the page should look like this:

enter image description here

Instead, it looks like this:

enter image description here

Upvotes: 1

Views: 632

Answers (1)

Pim
Pim

Reputation: 728

Add <div class="clearfix"></div> at the bottom of the <div class="content">, just before the 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;
}

Upvotes: 1

Related Questions