CSS Layout Queries. (Answered)

Question

Hi everyone, I've got some code here that I could use your help with. I'm trying to recreate from scratch the layout exercise from the CSS layouts course. With this one, when I go to expand the viewport to the first media query, my .primary and .secondary columns won't sit together, even though they've had a width of 50% within the wrapper div and have both been floated left.

Would anyone mind lending me a hand with this one?

Cheers

HTML:

<!DOCTYPE html> <html lang="en" dir="ltr">

<head> <meta charset="utf-8"> <title>Dragon Ball Fan Site</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> </head>

<body>

<header class="main-header clearfix">
  <div class="container">
    <h1 class="title">Dragon Ball Fan Site</h1>
      <ul class="main-nav">
        <li><a href="index.html">Main</a></li>
        <li><a href="index.html">Manga</a></li>
        <li><a href="index.html">Anime</a></li>
        <li><a href="index.html">Video Games</a></li>
        <li><a href="register.html">Register</a></li>
      </ul>
</header>

    <div class="banner">
      <img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
      <h1 class="name">Dragon Ball Fansite</h1>
      <span class="tagline">A Site For Fans, By Fans</span>
    </div>
  </div>

  <div class="wrapper clearfix">
    <div class="secondary col clearfix">
      <h2>Welcome</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>

    <div class="primary col clearfix">
      <h2>About Dragon Ball</h2>
      <img src="img/cast.png" alt="Main Cast" class="cast">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
    </div>

      <div class="tertiary col">
        <h2>About Us</h2>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
          <li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
          <li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
        </ul>
      </div>
    </div>

    <footer class="main-footer">
      <span class="copyright"> &copy;Dragon Ball Fan Site 2018</span>
    </footer>

</body> </html>

CSS:

/* ========= Fonts ========= */

@font-face { font-family: 'Roboto', sans-serif; }

@@font-face { font-family: 'saiyain-sans'; src: url(font/Saiyan-Sans.ttf); } /* ========= Elements ========= */

{ margin: 0; padding: 0; }

body { font-family: 'Roboto', helvetica, sans-serif; font-size: 1.25em; }

h1 { margin: 0; font-weight: 400; font-size: 2.441em;

}

h2 { font-size: 1.953em; padding-bottom: 1em; }

p { line-height: 1em; }

/* ========= Classes ========= */

.main-header { text-align: center; color: #f85b1a; margin-bottom: 1em; padding-top: 2em; }

.title { padding-bottom: 1em; }

.main-nav li { padding-bottom: 0.5em; font-weight: 400; }

.main-nav a { text-decoration: none; color: #f85b1a; display: block; }

.banner { text-align: center; background-color: #f85b1a; color: #fff; padding: 1em; margin-bottom: 2em; }

.main-img { border-radius: 50%; border: 3px solid #000; margin-bottom: 2em; }

.name { font-family: 'saiyain-sans', 'Roboto', sans-serif; margin-bottom: 0; }

.wrapper { margin: 0 auto; width: 90%; }

.col { margin: 10px; border: 1px solid red; }

.primary, .secondary { margin-bottom: 1em; }

.cast { width: 100%; }

.main-footer { background-color: #072083; text-align: center; padding: 1em; margin-top: 1em; }

.copyright { font-size: 0.8em; color: #8a9294; }

/* ========= media queries ========= */

@media (min-width: 779px) {

.container { margin: 0 auto; }

.main-header { padding: 1em; }

.title, .col { float: left; }

.title { padding-top: 0; padding-bottom: 0; font-size: 1.25em; }

.main-nav { float: right; }

.main-nav li { display: inline-block; float: left; list-style: none; font-size: 1.25em; padding: 0 0.2em; border-right: 1px solid #8a9294; }

.main-nav li:last-child { border-right: none; }

.name { padding-bottom: 0.5em; }

.tagline { font-size: 1.5em; }

.wrapper { width: 80%; }

.primary, .secondary { width: 50%; }

.copyright { padding: 2em; } /* ========= Clearfix ========= */

.clearfix::after { content: ""; display: table; clear: both; } }

Answer 1 · 2018-05-08T20:02:56Z

May 8, 2018 8:02pm

Thanks guys, in the end it was the border-box property which I added to the universal selector and therefore solved the problem. Appreciate your help, it put me on the right track to figure out what was going wrong.

Answer 2 · 2018-05-08T04:37:06Z

May 8, 2018 4:37am

Change your .wrapper div's width to 100% and your .primary and .secondary divs to 48%. That will look better. I think the problem is you're assigning width values to your primary and secondary divs that are wider than your wrapper div.

Answer 3 · 2018-05-08T05:58:31Z

May 8, 2018 5:58am

First of all I see you missed a closing tag of .container div in header. Second, the margins you add takes place, what means you have 50% width + 20px of margin(left & right). So it's wider then the wrapper.

Welcome to the Treehouse Community

Looking to learn something new?

Thomas Hewitt

Thomas Hewitt

CSS Layout Queries. (Answered)

3 Answers

Thomas Hewitt

Thomas Hewitt

Dennis Amiel Domingo

Dennis Amiel Domingo

eva sokolovsky

eva sokolovsky