CODEWITHSUNDEEP
htmlcssmultiple-columns
Kait Jardine
Kait Jardine

Reputation: 103

CSS divs into columns and image stretch to window

I have three columns inside a div called row and each column is in a div called third-col. I want the three columns side by side (inline) and then the next div contact to be below them. Currently all of the divs are in block one after another.

Another problem I'm having is with my home image. When the browser window is not maximized I want the image to still stretch to the bottom of the page. 

img {
  padding: 0;
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}

.row {
  padding: 0 20px;
  display: inline;    
}

.third-col {
  width: 30.3%;
  font-size: 16px;
  display: inline;
}

.col {
  float: left;
  box-sizing: border-box;
}
<img class="center" src="homepage.jpg" alt="">
<section id="skills">
  <p class="header">My Skills</p>
  <div class="skillsContainer">
    <div id="row">
      <div class="third-col"> 
        <ul>
          <li>items</li>
        </ul>
      </div>
    </div>
  </div>
</section>

Upvotes: 0

Views: 167

Answers (1)

Lo&#239;c Bellemare-Alford
Lo&#239;c Bellemare-Alford

Reputation: 548

For you background-image, you will want it to set it using CSS. This will allow it to stretch from side to side, top to bottom. Here is an example:

.body { margin: 0; padding: 0;}

.full-page-image {
  background-image: url(https://images.unsplash.com/photo-1489914099268-1dad649f76bf?auto=format&fit=crop&w=2850&q=80);
  background-size: cover; /* THIS MAKES THE IMAGE STRETCH TO ALWAYS COVER THE PAGE */
  background-position: center center;
  position: relative;
  width: 100%;
  height: 100vh; /* This is 100% of the height */
}
<div class="full-page-image"></div>

<h1>Page content goes here</h1>

For the rows, I suggest using flexbox. Here is a complete guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The idea is that each row is 100% of the witdh of the page. The content inside the row will be divided by the width you want. Here is an example:

.row{
    padding: 0 20px;
    display: flex; /* Makes the sub-elements flex */
    flex-wrap: wrap; /* Forces flexbox to respect children width */
    align-items: stretch; /* Makes childs the same height */
}
.third-col{
    width: 33%;
    font-size: 16px;
    min-height: 40px;
}
<div class="row">
  <div class="third-col">Col 1</div>
  <div class="third-col">Col 2</div>
  <div class="third-col">Col 3</div>
</div>

<div class="row">
   <div>Other page content</div>
</div>

Upvotes: 2

Related Questions