mercredi 17 octobre 2018

CSS box sizing in columns

I need to make my boxes look like this. Sketch

So you could say it is 75% box and 25% tekst to the side.

I have made two columns, but I don't think it is the right way to do this, because it won't work.

Any suggestions to make this work?

This is my code for HTML (were it is divided 50/50):

<section>
    <div class="row">
        <div class="column">
            <div class="frontpage_box">
                <p>OVER 200<br>abonnerende Gymnasier<br>i Danmark og Norge</p>
            </div>
        </div>
        <br>
        <div class="column">
            <p></p>
        </div>
    </div>
</section>

And this for CSS:

.frontpage_box p {
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  color: #FFFFFF;
  font-weight: bold;
}

.frontpage_box {
  background: #F39C12;
  margin: 0 auto;
  height: 300px;
  width: 500px;
  display: table;
  text-align: center;
}

.column {
  float: left;
  width: 50%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}




Aucun commentaire:

Enregistrer un commentaire