Reputation: 21

2 columns on a website

I'm trying to learn to build websites in html and css, and I came across the following problem. I tried using a grid layout, however the two columns won't get placed next to eachother. I've tried to use some tutorials, but they don't seem to work and since I'm kinda new to this I don't really know what I'm doing wrong.

This is my html file

<body>
<div class="page-wrap">
    <header id="top" class="top">
        <div class="topbar">
            <h1>Jurrian Kole</h1>
        </div>

        <div class="secondbar">
            <nav class="main-nav">
                <a href="#">Home</a>
                <a href="#">Portfolio</a>
                <a href="#">Contact</a>
                <a href="#">Work</a>
                <a href="#">Examples</a>
            </nav>
        </div>
    </header>

    <div class="content-wrap">

        <header class="article-header">
            <h1 class="article-header-h1">
                Hello and welcome to my website!
            </h1>   
            <p class="article-header-p">
                Published by Jurrian Kole, thursday, August 15th 2015
            </p>
        </header>

        <div class="blog-post">

            <div class="article-content" id="grid-2-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, modi. Expedita natus asperiores repellat, hic deserunt repudiandae dolore et quam nulla. Magnam dolor magni delectus reprehenderit quasi facere ipsam iusto.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti similique at maxime, architecto provident cupiditate, iusto iste consectetur est ab illo nemo illum, modi quis aspernatur eos eaque soluta. Officiis.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio non repellendus ut accusantium eveniet dolor sit corporis veniam alias soluta voluptas explicabo consequatur sed, nesciunt. Id libero eveniet obcaecati adipisci.</p>

                <h3>I'm a h3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni autem fugiat, aliquid a aut! Labore in doloremque laudantium delectus dolorum recusandae, quidem, asperiores molestiae repellendus molestias facere veritatis sequi hic.</p>

                <h3>I'm a h3 as well</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam temporibus necessitatibus architecto ipsa quo aspernatur autem vitae, ad non quasi perspiciatis maxime recusandae eum, possimus dolorem soluta, modi omnis quis?</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio distinctio, vitae, unde possimus iste non libero. Tenetur in dolores expedita accusamus placeat sit ut vel, recusandae libero iste, perferendis perspiciatis!</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus autem ratione illo sint vel suscipit magni, quis quibusdam voluptatibus quod aspernatur, nihil laborum dicta, soluta rerum fugit, placeat animi obcaecati!</p>
            </div>
        </div>

        <div class="second-content">
            <div class="sidepane" id="grid-1-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil molestiae, laboriosam nulla harum natus rem, nisi est distinctio quas, nemo commodi blanditiis consectetur perspiciatis voluptatibus pariatur, consequuntur dolore. Perferendis, cumque.</p>
            </div>
        </div>
    </div>
</div>

And this is my css file

a {
text-decoration: none;
}

body {
    background: #222;
    margin: 0;
    padding: 0;
}

.page-wrap {
    width: 1280px;
    margin: auto;
    font-family: sans-serif;
}

.top .topbar h1 {
    margin-left: 45px;
    color: white;
}

.top .secondbar {
    background: #333;
}

.top .secondbar .main-nav a {
    display: inline-block;
    margin: 5px;
    position: relative;
    padding: 9px;
    color: white;
}

.page-wrap .content-wrap {
    background: #EEE;
    margin-top: -22px;
}

.article-header-h1 {
    padding-top: 10px;
    text-align: center;
}

.article-header-p {
    font-family: monospace;
    font-size: 15px;
    text-align: center;
}

#grid-2-3 {
    background: white;
    float: left;
    width: 700px;
}

#grid-2-3 p, h3 {
    padding: 15px;
}

#grid-1-3 {
    background: white;
    float: right;
    width: 3300x;
}

#grid-1-3 p, h3 {
    padding: 15px;
}

If possible, could you also post how you figured out what the problem was? And is there a way I can improve the code I have so far?

Thanks in advance!

Upvotes: 1

Answers (3)

Dennis Waasdorp

Reputation: 11

I can see the is a typo in your css:

#grid-1-3 {
    background: white;
    float: right;
    width: 3300x;
}

the width there is 3300x instead of 330px

Upvotes: 1

Cow

Reputation: 769

Solution on JSFiddle

The issue in your code is two parts:

You are adding padding to a fixed width item. So if you have a box with a set width/height of 200x200px and add 10px of padding, you box will actually have dimensions of 220x220px which can cause items to be pushed to the second row if there is not enough horizontal space. You fix this by adding box-sizing attribute to your css elements. box-sizing tells the css whether or not to include the paddingor both padding and border in the fixed width of any element. To make the width include padding you'd add box-sizing: padding-boxand to have the width include both padding and border you'd add box-sizing: border-box In your case, you have a 3 column grid and want the box on the left to be 2/3 of the page. So you'd have:

#grid-2-3{ /* Other Attributes Here */ width: 66.6667% // I tend to go to four decimal places if possible. box-sizing: padding-box; }#grid-1-3{ /* Other Attributes Here */ width: 33.3333% // I tend to go to four decimal places if possible. box-sizing: padding-box; }
Your id grid-1-3 is on the wrong element. It should be on the element with the class second-content.

Final code I had was:

HTML

<div class="page-wrap">
    <header id="top" class="top">
        <div class="topbar">
            <h1>Jurrian Kole</h1>
        </div>

        <div class="secondbar">
            <nav class="main-nav">
                <a href="#">Home</a>
                <a href="#">Portfolio</a>
                <a href="#">Contact</a>
                <a href="#">Work</a>
                <a href="#">Examples</a>
            </nav>
        </div>
    </header>

    <div class="content-wrap">

        <header class="article-header">
            <h1 class="article-header-h1">
                Hello and welcome to my website!
            </h1>   
            <p class="article-header-p">
                Published by Jurrian Kole, thursday, August 15th 2015
            </p>
        </header>

        <div class="blog-post">

            <div class="article-content" id="grid-2-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, modi.     Expedita natus asperiores repellat, hic deserunt repudiandae dolore et quam nulla. Magnam dolor magni delectus reprehenderit quasi facere ipsam iusto.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti similique at maxime, architecto provident cupiditate, iusto iste consectetur est ab illo nemo illum, modi quis aspernatur eos eaque soluta. Officiis.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio non repellendus ut accusantium eveniet dolor sit corporis veniam alias soluta voluptas explicabo consequatur sed, nesciunt. Id libero eveniet obcaecati adipisci.</p>

                <h3>I'm a h3</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni autem fugiat, aliquid a aut! Labore in doloremque laudantium delectus dolorum recusandae, quidem, asperiores molestiae repellendus molestias facere veritatis sequi hic.</p>

                <h3>I'm a h3 as well</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam temporibus necessitatibus architecto ipsa quo aspernatur autem vitae, ad non quasi perspiciatis maxime recusandae eum, possimus dolorem soluta, modi omnis quis?</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio distinctio, vitae, unde possimus iste non libero. Tenetur in dolores expedita accusamus placeat sit ut vel, recusandae libero iste, perferendis perspiciatis!</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus autem ratione illo sint vel suscipit magni, quis quibusdam voluptatibus quod aspernatur, nihil laborum dicta, soluta rerum fugit, placeat animi obcaecati!</p>
            </div>
        </div>

        <div class="second-content" id="grid-1-3">
            <div class="sidepane">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil molestiae, laboriosam nulla harum natus rem, nisi est distinctio quas, nemo commodi blanditiis consectetur perspiciatis voluptatibus pariatur, consequuntur dolore. Perferendis, cumque.</p>
            </div>
        </div>
    </div>
</div>

CSS:

a {
    text-decoration: none;
}

body {
    background: #222;
    margin: 0;
    padding: 0;
}

.page-wrap {
    width: 1280px;
    margin: auto;
    font-family: sans-serif;
}

.top .topbar h1 {
    margin-left: 45px;
    color: white;
}

.top .secondbar {
    background: #333;
}

.top .secondbar .main-nav a {
    display: inline-block;
    margin: 5px;
    position: relative;
    padding: 9px;
    color: white;
}

.page-wrap .content-wrap {
    background: #EEE;
    margin-top: -22px;
}

.article-header-h1 {
    padding-top: 10px;
    text-align: center;
}

.article-header-p {
    font-family: monospace;
    font-size: 15px;
    text-align: center;
}

#grid-2-3 {
    background: white;
    float: left;
    width: 66.6667%;
    box-sizing: padding-box;
}

#grid-2-3 p, h3 {
    padding: 15px;
}

#grid-1-3 {
    background: white;
    float: right;
    width: 33.3333%;
    box-sizing: padding-box;
}

#grid-1-3 p, h3 {
    padding: 15px;
}

Upvotes: 0

Logard

Reputation: 1513

Try something like this for the column classes:

    .rightCol
  {
    width: 50%;
    float: right;
    height: 30px;
  }

  .leftCol
  {
    width: 50%;
    float: left;
    height: 30px;
    text-indent: 10px;
  }

Floating is the key here. Adjust width and height as you like. Make sure the parent element has the right width to hold the columns.

Upvotes: 1

2 columns on a website

Answers (3)

Related Questions