ravelinx ravelinx - 2 months ago 8
HTML Question

how to adjust margin and padding using width with percentage?

So I want to achieve this using css and html

enter image description here

So I wrote this code that sets the width of each box to 33.33%

HTML:

<h1>Our menu</h1>

<div class="row">
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="chiken">Chicken<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-2 col-mbl-1">
<p id="beef">Beef<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-dsk-3 col-tbl-1 col-mbl-1">
<p id="sushi">Sushi<p>
<p class="dummy_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>


CSS:

/* Base style */

h1 {
text-align: center;
}

.row {
width: 100%;
height: auto;
padding: 10px;
}

* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0px;
}

div > div {
background-color: gray;
border: 1px solid;
float: left;
}

.dummy_text {
clear:right;
padding: 10px;
}

/* Top right paragraphs*/

#chiken {
float: right;
background-color: pink;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
position: relative;
left: 1px;
padding: 5px;
}

#beef {
float: right;
background-color: indianred;
color: white;
border: 2px solid black;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}

#sushi {
float: right;
background-color: lightgoldenrodyellow;
border: 2px solid;
width: 150px;
text-align: center;
font-weight: bold;
left: 1px;
padding: 5px;
}

/* Desktop */
@media (min-width: 992px) {
.col-dsk-3 {
float: left;
width: 33.33%;
}
}


And the result is this:

enter image description here

The thing is that I need spacing between paragraphs, so what I though was to add some margin-left to the boxes, the thing is that when I add 10px, the result is that one of the three boxes goes to a new line, but I need the three in the same line.

This is what I did to add the margin, I modify the div > div part like this:

div > div {
background-color: gray;
border: 1px solid;
float: left;
margin-left: 10px;
}


And then result:

enter image description here

Answer

Use % values for all your layout widths. Use :last-child to set the margin of the right div to zero.

div > div {
    background-color: gray;
    border: 1px solid;
    float: left;
    margin-right: 2%
}

div > div:last-child {
   margin-right: 0;
}

/* Desktop */
@media (min-width: 992px) {
    .col-dsk-3 {
        float: left;
        width: 32%;
    }
}

Here's a codepen:http://codepen.io/prime8/pen/LRympm