Welcome to WebmasterWorld Guest from 34.236.171.181

Forum Moderators: not2easy

Message Too Old, No Replies

Using width as percentage, not adding up to 100%

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
5:32 am on Mar 30, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


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.
6:15 am on Mar 30, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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;
}
}
6:30 am on Mar 30, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4558
votes: 363


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.
9:51 am on Mar 30, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
10:08 am on Mar 30, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,
you may find this article...

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


...to be mildly interesting. ;)



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

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2738
votes: 837


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/
6:33 am on Apr 2, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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