CODEWITHSUNDEEP
htmlcss
MadBoy
MadBoy

Reputation: 11104

Align card to both ends with one css class?

I am not really HTML/CSS guy so excuse me if it's something really simple. I've some code that produces this.

enter image description here

Here is a relevant part of CSS

div.content {
    /* padding: 4px 0px 5px 11px; */
    /* margin: 0px 0px 0px 0px; */
    width: 100%;
    color: #000000;
    background-color: #f9f9f9;
    overflow: hidden; /* NEW */
    overflow-x: hidden;
    overflow-y: hidden;
    align-self: auto;
}


div.column {
    padding: 10px 10px 10px 10px;
    /*  width: 100%; */
    float: left;
}
div.twol {
    box-sizing: border-box;
    width: calc(100% / 2 - 20px);
    padding: 10px;
    float: left;
}
div.twor {
    box-sizing: border-box;
    width: calc(100% / 2 - 20px);
    padding: 10px;
    float: right;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 40%;
    border-radius: 5px;
    margin: 5px;
}

Originally I was using only div.two with float:left but whatever I tried it would keep both of top charts aligned to the left making the uneven alignment. Is there a way to get those charts (within cards) to always align so that it's kind of justified? The goal is that when it's one column it goes from edge to edge and I would like to keep it similar when it comes to two, three and so on columns. I don't want to create multiple CSS to cover each and every scenario there is.

Here is the old approach with one div.two. Notice how top charts are not aligned to left/right making the overall size of 1st row smaller than a 2nd row. enter image description here

The solution should work for 1,2,3,4,5,6 "columns" (not sure if that matters).

Just in case you need full html: https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example9/Example9.html

Upvotes: 0

Views: 565

Answers (2)

Siavas
Siavas

Reputation: 5090

The problem that you have is due to box-sizing property, which is currently set to border-box. This makes the padding applied to the element be subtracted from its width, so you will not have to consider this in the width of the elements.

As you have the following ruleset (excerpt):

div.two {
    width: calc(100% / 2 - 20px);
    padding: 10px;
}

.card {
   margin: 5px;
}

What this actually does is that it sets the width of the cards to half of the parent's size minus 20px (which would be the padding as you would have thought), but as you have box-sizing: border-box, the padding is already taken care of, but you still have 10px total margin for each card yet subtract 20px in the formula.

So the solution would simply be:

div.two {
    width: calc(100% / 2 - 10px);
    padding: 10px;
}

div.column {
    box-sizing: border-box;
}

This way the cards will take the full width overall and still have the spacing in between them.

This solution will work with any number of columns – you would only have to divide the width by the number of columns (e.g. for 4 columns: calc(100% / 4 - 10px)).

Learn more about box-sizing property at CSS-Tricks.

Also just as an aside, in the linked HTML you seem to have two <html> tags. You should have only one for conforming with the standards.

Upvotes: 2

Rens
Rens

Reputation: 518

You should use Flexbox, it makes life way easier. Here's an simple example:

.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.col {
  background: teal;
  padding: 20px;
  margin: 1%;
  flex: 1;
}
<div class="flex-grid">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

<div class="flex-grid">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
  <div class="col">Column 4</div>
  <div class="col">Column 5</div>
  <div class="col">Column 6</div>
</div>
<div class="flex-grid">
  <div class="col">Column 1</div>
</div>

Upvotes: 1

Related Questions