Creating a two column page.

Question

I can't seem to get my web page to split into two separate columns. Ideally I want my right column to take up 40% of the page and my left column to take up 60% of the page. Since my CSS is super weak, right now I'm focusing on just getting the page split evenly in two. Any input on my HTML or CSS would be great, this is my first website.

(Note: formatted the <p> tag with lorem ipsum specially for this page)

HTML:

<!DOCTYPE html>
<html>

    <head>
      <link rel="stylesheet" href="styles.css">
      <meta charset="UTF-8">
      <title>Enzo Cnop</title>
    </head>
    <body>
        <header>
        <!-- Image of face -->
            <div class= "wrapper" > <!-- Wrapper for...reasons -->
                <img src="enzoIcon.png" alt= "Image of Enzo Cnop, this website's developer." class= "profile-image">
            </div>
        </header>
        <div class="main-content">      <!-- Right side for text/navigation -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <!-- Senior Project (subtext: Reading Playfully: A New Branch of Criticism for The Digital Age.) -->
            <li><a href="#">Senior Project</a></li>
            <!-- Resume Page Link -->
            <li><a href="#">Experience</a></li>
        </div>
        <div class="aside"> <!-- Left side for image/animation -->
            <div class= "coffeeImage"> <!-- COFFEE CUP IMG -->
            </div>
        </div>
        <footer>
            <!-- Twitter and Instagram Links -->
            <li><a href="#" class="social twitter">Twitter</a></li>
            <li><a href="#" class="social linkedin">LinkedIn</a></li>
            <li><a href="#" class="social github">Github</a></li>
            <li><a href="#" class="social instagram">Instagram</a></li>
        </footer>
    </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Work+Sans')

body{
    font-family: 'Work Sans';
    position: relative;
}
*{
    box-sizing: border-box;
}

.main-content,
.aside {
    width: 44.5%;
    background: #f2f2f1;
}

.main-content{
  float: right;
}

.aside{
  float: left;
}

.coffeeImage{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("coffee.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

Answer 1 · 2017-09-06T03:34:44Z

September 6, 2017 3:34am

It's weird, copy your code exactly like this and I opened it in the browser and it shows me 2 columns.

Maybe you're not reloading the page without a cache. As a rule, browsers do not update CSS documents to optimize time, you can force a complete update of the page (in google chrome) with CTRL + F5.

Welcome to the Treehouse Community

Looking to learn something new?

Enzo Cnop

Enzo Cnop

Creating a two column page.

1 Answer

Erick Amezcua

Erick Amezcua

Enzo Cnop

Enzo Cnop