Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Enzo Cnop
Enzo Cnop
5,157 Points

Creating a two column page.

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;
}

1 Answer

Erick Amezcua
Erick Amezcua
17,171 Points

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.

Enzo Cnop
Enzo Cnop
5,157 Points

It's giving me two columns, but they are offset, and the text within is badly placed. In addition, the main image element is not appearing at all... Maybe I'm just not understanding the box model well enough to get the page to display how I wish.