Using width as percentage, not adding up to 100%

Forum Moderators: not2easy

Message Too Old, No Replies

Using width as percentage, not adding up to 100%

csdude55

4:10 am on Mar 30, 2018 (gmt 0)

I have a container with 3 elements inside:

<style>

#share_list {
 padding: 10px;
 font-size: 13px;
 color: #FFF;
 font-weight: bold;
 line-height: 40px
}

#share_list .cell {
 display: inline-block;
 height: 40px;
 padding: 0 2px;
 width: 31%;
 margin-right: 1%
}

</style>

<div id="share_list">
 <div class="cell" style="background:#1D3A7B">
 Text
 </div>

 <div class="cell" style="background:#00A3E0">
 Text
 </div>

 <div class="cell" style="background:#408080">
 Text
 </div>
</div>

Each element has a width of 31%, a left margin of 0.5%, and a right margin of 0.5%. That should total 96%.

But on desktop I'm getting a little less than 100%, and on mobile it a bit more (so the last element is wrapping).

I tried removing padding: 10px from the container in case that was throwing things off, but that didn't help with the mobile wrapping, and it just added more of a right margin on desktop.

What am I misunderstanding here? What's the correct way to get everything to equal out?

not2easy

5:32 am on Mar 30, 2018 (gmt 0)

That is because on desktop, the 1% right margin calculates 1% of the total width and it is a number. It does the same thing on mobile screens and 1% is a different number. The total (width) of the padding is 32px and that number is the same on mobile or desktop.

An example using 360px mobile screen width:
1% margin = 4px per margin x3 =12px (actually "3.6 px" but there are no .6px so it is 4px) + 20px container padding + 4px .cell padding x3= 12px.
Margin and padding total = 44px (12+20+12px)
31% of the remaining 316 px is 98px x3 = 294px (97.96px = 98px for each text element). Calculate 13px width per letter (as an average) without any text, the total is 338px. More than 5 or 6 letters per text element will put you over the edge. This does not include any larger text, only 13px.

If this is the same css as in your concurrent alignment question: [webmasterworld.com...] (it appears to use the same element classes) then one of those elements has another 42px span assigned to one letter. If you have @media settings that might change these calculations it wasn't included. These totals also do not include any styling elements outside of those included here. The desktop view is not squeezed so it expands to fill available space. The mobile view is trying to fit content into available space so it wraps.

Have you tried @media settings that use "small" as a font size? Depending on the font, you may want to look at X-small.

csdude55

6:15 am on Mar 30, 2018 (gmt 0)

Ahh, I see. And you're right, this is the same css as the other question, just a totally separate issue that didn't make a lot of sense. I understand now, though :-)

Other than using defined pixel widths based on screen width *, is there a more responsive way to make 3 inline elements of equal width with equal margins between them?

// * based on screen width
#share_list .cell {
 blah blah blah;
 width: 194px;
 margin: 0 3px;
}

@media only screen and (max-width: 660px) {
 #share_list .cell {
  width: 98px !important;
  margin: 0 1px;
 }
}

not2easy

6:30 am on Mar 30, 2018 (gmt 0)

The setting "display: inline block;" causes the wrap but it also cause it to fill the width on desktop. You can look at alternate methods for display: or try flex-box. The display: settings are very flexible and it can pay to look into some of them. For example, "display: inline-flex;" gives you more flexible inline display.

birdbrain

9:51 am on Mar 30, 2018 (gmt 0)

Hi there csdude55,

as I pointed out in this thread of yours...

[webmasterworld.com ]

...the CSS "display: table" attribute is the ideal choice for
this project of yours. :)

Please do not confuse the CSS "display: table" attribute
with the HTML "table element". :(

The former is a legitimate and well used display method
whereas the latter is the semantic element for displaying
tabular data. ;)


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
   background-color: #f0f0f0;
   font: 100% / 162% verdana, arial, helvetica, sans-serif;
  }

#share_list {
   display: table; 
   width: 100%;
   box-sizing: border-box;
   border-spacing: 0.625em;
   font-size: 0.8em;
   font-weight: bold;
   color: #fff;
   line-height: 2.5em
  }

#share_list .cell {
   display: table-cell;
   padding: 0 0.25em;
  }

#share_list .cell:nth-of-type(1) {
   background:#1d3a7b;
  }

#share_list .cell:nth-of-type(2) {
   background:#00a3e0;
  }

#share_list .cell:nth-of-type(3) {
   background:#408080;
  }

@media ( max-width: 30em ) {
  #share_list, #share_list .cell {
     display:block;
   }
  #share_list {
     padding: 0.625em;
   }
#share_list .cell:nth-of-type(2) {
     margin: 0.625em 0;
    }
  }
</style>

</head>
<body> 
  <div id="share_list">
    <div class="cell">
     Text
    </div>

    <div class="cell">
     Text
    </div>

    <div class="cell">
     Text
    </div>
  </div>

</body>
</html>

birdbrain

birdbrain

10:08 am on Mar 30, 2018 (gmt 0)

Hi there csdude55,

you may find this article...

The Anti-hero of CSS Layout - "display:table" [colintoh.com]

...to be mildly interesting. ;)

birdbrain

NickMNS

1:35 pm on Mar 30, 2018 (gmt 0)

Add this:

box-sizing: border-box;

to style #share_list .cell and it solves your problem.

This style setting includes the border, and padding into the width calculation of the element, thus avoiding the issue described by not2easy. I also agree with not2easy with respect to using flex-box for this.

Here a fiddle:https://jsfiddle.net/yfjh76fq/3/

csdude55

6:33 am on Apr 2, 2018 (gmt 0)

Thanks, Nick, it looks like box-sizing: border-box was the easiest solution :-)