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

Question

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

Answer 1 · 2020-02-11T09:52:07Z

February 11, 2020 9:52am

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

Welcome to the Treehouse Community

Looking to learn something new?

Andres Chaves

Andres Chaves

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

HTML Code (index.html)

CSS Code (style.css)

1 Answer

Jonathan Grieve

Jonathan Grieve

Andres Chaves

Andres Chaves

Jonathan Grieve

Jonathan Grieve