floating columns in media query

Question

Hello!

Please look at the media query section of this code, In the html, the columns are in this order, first (extra-content), second(primary-content), last(secondary-content).

I dont understand why I cant position my columns this way:

.content-row{
position:relative;
}
.col{

position:absolute;
width:30%;

}
.extra-content{
left:0;
}

.secondary-content{
right:0;

}

Here is the whole code:

<!DOCTYPE html>
<html>
<head>
    <title>Positioning Schemes</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
    body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

.main-header{
padding:15px;
min-height:150px;

}
.main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:10px 20px;
color:white;
border-radius:5px;

}
.main-nav li{
margin-top:8px;

border-radius:5px;
}

#icon {
    background-color: #39add1;
    margin-top: 34px;
    height: 180px;
    border-radius: 5px;
    position: relative;
}

#icon:after{
content:"";
background: url('icon.png') no-repeat;
position:absolute;
background-size:100%;
display:inline-block;
width:150px;
height:150px;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;



}

.col{
padding:20px;
}
.main-footer{
padding:15px;
text-align:center;
}
/*media query with relative
==========================================*/
@media(min-width:769px){

.main-header{
position:fixed;
top:0;
width:100%;
z-index:100;
}
body{
padding-top:150px;
font-size:16px;
}
.main-banner{
display:none;

}
.main-logo, .main-nav{
position:absolute;

}
.main-logo{
top:50px;
}
 .main-nav li{
display:inline-block;

}
.main-nav{
top:70px;
left:200px;
}

.main-nav li{
margin-right:10px;
}
/*columns
===================*/
.content-row{
position:relative;
}
.col{

position:absolute;
width:30%;

}
.primary-content{
left:30%;
width:40%;
}

.secondary-content{
right:0;

}
html, body, .col, .content-row,.main-wrapper{
height:100%;
}
.feat-img{

float:left;
width:30%;
}

*{
box-sizing:border-box;

}
.group::after{
content:"";
display:block;
clear:both;

}
}
    </style>
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav group">
                <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>
        </header>
        <div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
        </div>
        <div class="content-row group">
            <div class="extra-content col">
                <h3>Extra Content</h3>
                <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
                <hr>
                <p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>


            </div>
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <img class="feat-img" src="http://lorempixel.com/400/300" />
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>

Answer 1 · 2014-09-15T13:47:03Z

September 15, 2014 1:47pm

Hello OS, could you explain what it is you want to accomplish, e.g. "When the screen size drops below 768px the extra-content class should float left." A more detailed description of what you're looking to accomplish will help.

Answer 2 · 2014-09-16T09:31:41Z

September 16, 2014 9:31am

Hello Michael,

fair enough. Below I have posted the code I think should work just like the one at the top does. I don't understand why I can't mathematically placed my columns the way I did below. I think both code (the top one and this one at the bottom) are similar, but the one at the bottom is more intuive. Here is the video this lesson comes from:

http://teamtreehouse.com/library/css-layout-techniques/float-layout/floating-columns-and-images

Cheers!

<!DOCTYPE html>
<html>
<head>
    <title>Positioning Schemes</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
    body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

.main-header{
padding:15px;
min-height:150px;

}
.main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:10px 20px;
color:white;
border-radius:5px;

}
.main-nav li{
margin-top:8px;

border-radius:5px;
}

#icon {
    background-color: #39add1;
    margin-top: 34px;
    height: 180px;
    border-radius: 5px;
    position: relative;
}

#icon:after{
content:"";
background: url('icon.png') no-repeat;
position:absolute;
background-size:100%;
display:inline-block;
width:150px;
height:150px;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;



}

.col{
padding:20px;
}
.main-footer{
padding:15px;
text-align:center;
}
/*media query with relative
==========================================*/
@media(min-width:769px){

.main-header{
position:fixed;
top:0;
width:100%;
z-index:100;
}
body{
padding-top:150px;
font-size:16px;
}
.main-banner{
display:none;

}
.main-logo, .main-nav{
position:absolute;

}
.main-logo{
top:50px;
}
 .main-nav li{
display:inline-block;

}
.main-nav{
top:70px;
left:200px;
}

.main-nav li{
margin-right:10px;
}
/*columns
===================*/
.content-row{
position:relative;
}
.col{

position:absolute;
width:30%;

}
.extra-content{

left:0;
}

.secondary-content{
right:0;

}
html, body, .col, .content-row,.main-wrapper{
height:100%;
}
.feat-img{

float:left;
width:30%;
}

*{
box-sizing:border-box;

}
.group::after{
content:"";
display:block;
clear:both;

}
}
    </style>
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav group">
                <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>
        </header>
        <div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
        </div>
        <div class="content-row group">
            <div class="extra-content col">
                <h3>Extra Content</h3>
                <p>Filet mignon turkey flank doner strip steak. Frankfurter ham hock turkey, venison sirloin pig chuck shank capicola hamburger doner spare ribs boudin.</p>
                <hr>
                <p> Drumstick bresaola meatloaf ham hock salami tri-tip landjaeger beef filet mignon biltong boudin turkey.</p>


            </div>
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <img class="feat-img" src="http://lorempixel.com/400/300" />
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>

Answer 3 · 2014-09-16T13:43:20Z

September 16, 2014 1:43pm

In your code, you didn't specify what you want to do with your .primary-content div so it conceals your .extra-content div. I'm not certain if the following is exactly what you're looking for, but I gave a 40% left position to the .primary-content div to separate it from the left side of the row.

.content-row{
    position:relative;
}
.col{
    position: absolute;
    width: 30%;
}
.extra-content{
    left: 0%;
}
.primary-content {
    left: 40%;
}
.secondary-content{
    right: 0%;
}

Answer 4 · 2014-09-18T08:34:15Z

September 18, 2014 8:34am

Hello Michael,

Yes, you are right, but (referring to your code) if .col gives each column a default 30%, then just by giving extra-content{left:0% }and .secondary-content {right:0%;}, the browser should automatically place .primary-content in the middle. The browser should assume that primary-content has a width of 40% and place it in the middle (the order it is in html )

Do you know if there is a reason I also have to position .primary-content; I think positioning extra-content and secondary-content should still yield the same result?

Welcome to the Treehouse Community

Looking to learn something new?

orange sky

orange sky

floating columns in media query

4 Answers

Michael Hicks

Michael Hicks

orange sky

orange sky

Michael Hicks

Michael Hicks

orange sky

orange sky

Michael Hicks

Michael Hicks