Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Andres Chaves
Andres Chaves
3,462 Points
Posted by Andres Chaves
Andres Chaves
3,462 Points

CSS - Layout : Error when try to display two columns layout.

Hi Community,

I am having an issue trying to display two columns layout. Is showing perfect when I place only text in column 1 and column 2. The problem comes when I try to include an image in the second column to place it side by side to my text. Also beside the help I can get with my issue, any suggestions to my solution will be well received.

HTML Code (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>The box Model</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main-box">
    <div class="main-box-col1">
        <h1>What is Lorem Ipsum?</h1>
        <p>What is Lorem Ipsum?Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
    <div class="main-box-col2">
        <img src="gallery-krakanos.gif">
    </div>
</div>
</body>
</html>

CSS Code (style.css)

.main-box {
    background-color: orange;
    border:1px solid red;
    width: 50%;
    height: 400px;
}

div {
    padding: 0;
    margin:0;
}

body {
    padding: 0;
    margin: 0;
}

.main-box-col2 {
 width: 49.6%;
 height: 100%;
 margin:0;
 padding: 0;
 background-color:green;
 display:inline-block;
 text-align: center;
}

.main-box-col1 {
 width: 49.6%;
 height: 100%;
 margin:0;
 padding:0;
 background-color:blue;
 display:inline-block;
}

img {
    width: 50%;
    height:50%;
}

p{
    margin:0;
    padding: 0;
}

h1{
    margin:0;
    paddin:0;}

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Andres,

I've made some changes that I think might help you. See how it goes. One thing I didn't have was access to your image so it may or may not break the changes.

But essentially I increased the size of the container element main-box and decreased the width of your columns. What's happening is the width of the columns in total is greater than the width of the container so it's pushing the second column down below.

I hope this helps and is what you're after. 

.main-box {
    background-color: orange;
    border:1px solid red;
    width: 75%;
    height: 400px;
    position: relative;
    margin: 0 auto;

}

div {
    padding: 0;
    margin:0;
}

body {
    padding: 0;
    margin: 0;
}

.main-box-col2 {
 width: 45%;
 height: 100%;
 margin:0;
 padding: 0;
 background-color:green;
 display:inline-block;
 vertical-align: top;
 text-align: center;
}

.main-box-col1 {
 width: 45%;
 height: 100%;
 margin:0;
 padding:0;
 background-color:blue;
 display:inline-block;
}

.main-box-col2 img {
    width: 90%;
    height:50%;
}

p{
    margin:0;
    padding: 0;
}

h1{
    margin:0;
    paddin:0;}
Andres Chaves
Andres Chaves
3,462 Points
Andres Chaves
Andres Chaves
3,462 Points

Thanks Jonathan! it worked. I would like to ask you one more thing. How would you do to fit two columns within the width of your container ?, and I mean about the math. for example in this case I tell my main box to be 50% of the width. How could I be sure on the percentage for my two inside divs. Is there any calculations ?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Maybe try using the CSS calc function to help you out, so you can use your calculations directly in your CSS.

There is a formula you can use to calculate your width for various screens but it escapes my brain right now and I can't find it in a Search.

Alternatively you can use CSS Grid and/or Flexbox to take the headache of trying to calculate it away from you.

https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

It's not easy to explain I'm afraid so the best thing to do is to deep dive into it.