CODEWITHSUNDEEP
htmlcss
Natalie Pickrom
Natalie Pickrom

Reputation: 39

Having trouble with columns. Trying to get an column with an image and a column with text and background next to each other

Having trouble with columns. Trying to get an column with an image and a column with text and background next to each other.

Here is the result I would like

Here is what I am getting (fail)

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
  padding-top: 25px;
  padding-bottom: 95px;
}
<div class="primary-content">
  <p class="intro">
  Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
  </p>
  <div id="container2">
    <div id="container1">
      <div id="About">
        <h2>About</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.
        </p>
      <!-- Column one end -->
      </div>
      <div id="Capitalbuilding">
      <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
      <!-- Column two end -->
      </div>
    </div>
  </div>
</div><!-- End .primary-content -->

Upvotes: 3

Views: 49

Answers (4)

JoshKisb
JoshKisb

Reputation: 752

Flexbox is a good solution to this. Just set the container1 to display: flex

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}
#container1 {
  display: flex;
  background-color: #E9CCA9;

}
#Capitalbuilding {
  background-color: #4e4e4e;
  width: 40%;
}
<div class="primary-content">
     <p class="intro">
                Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
            </p> 
    <div id="container2">
    <div id="container1">
        <div id="About">
            <h2>About</h2>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.  .
        </p>
            <!-- Column one end -->
        </div>
        <div id="Capitalbuilding">
            <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
            <!-- Column two end -->
        </div>
    </div>
</div>

        </div><!-- End .primary-content -->

Upvotes: 0

ShaneG
ShaneG

Reputation: 1518

Here you go. Tested and works perfect:

<div class="primary-content">
        <p class="intro">
            Austin, Texas is not only the capital.<br>It's a hub for 
            awesome live music, out of this world art, a booming tech 
             scene as well as a favorite foodie destination.
        </p>
<div id="container2">
  <div style="display: flex" id="container1">
    <div style="flex: 1" id="About">
        <h2>About</h2>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
         id ante pellentesque, ullamcorper sapien vel, sagittis tellus. 
         Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id 
         nunc laoreet eleifend. Integer aliquet massa vitae auctor 
         rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean 
         sit amet orci fringilla, egestas eros ornare, dignissim magna. 
         Duis commodo felis sit amet lacus congue fermentum. 
         Pellentesque tincidunt semper nibh vel posuere. Integer tempus 
         leo ut diam scelerisque fermentum in id tortor. Vestibulum et 
         condimentum arcu. Morbi vitae sem nec lectus egestas 
         tristique. Cras hendrerit maximus purus eu tempus. Suspendisse 
         nec nisi ipsum.  .
        </p>
        <!-- Column one end -->
    </div>

    <div style="flex: 1" id="Capitalbuilding">
        <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
        <!-- Column two end -->
    </div>
</div>

Upvotes: 0

Alexander Grosul
Alexander Grosul

Reputation: 1814

If you don't want to use any framework(like bootstrap) just add float to your container and add overflow:hidden to the parent container.

<div class="wrapper">
    <div class="col-1">Your content here</div>
    <div class="col-2">Your content here</div>
</div>

.wrapper {
    overflow:hidden;
}
.col-1, .col-2 {
    float:left;
    width: 50%;
}

Upvotes: 0

sol
sol

Reputation: 22939

You could use flexbox here to get started.

Add...

#container1 {
  display: flex;
}

Guide to flexbox here.

fiddle

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
  padding-top: 25px;
  padding-bottom: 95px;
}

#container1 {
  display: flex;
}
<div class="primary-content">
  <p class="intro">
    Austin, Texas is not only the capital.
    <br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
  </p>
  <div id="container2">
    <div id="container1">
      <div id="About">
        <h2>About</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus.
          Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam
          scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
        </p>
        <!-- Column one end -->
      </div>
      <div id="Capitalbuilding">
        <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
        <!-- Column two end -->
      </div>
    </div>
  </div>

</div>
<!-- End .primary-content -->

Upvotes: 1

Related Questions