Using Flexbox width calculation not working

HTML & CSS
1

@coothead,

Things were going so well today on my product-catalog page that you were helping me out with using a width calculation.

Then tonight I tried applying that concept to my product-details page, and it is hopelessly broken. :confused:

Two sets of code…


First, this example is pretty close to what I am shooting for, however it uses a fixed width for the product details portion, and I was thinking that might have drawbacks (or not)…

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

<head>
  <!-- This file uses fixed width <li> and seems to work pretty good. -->
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>z_product-details_orig.html</title>

  <style media="screen">
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    #pageBody_ProductDetails{
      display: flex;
      flex-wrap: wrap;
/*      justify-content: space-around;          /**/
      margin: 50px auto 0 auto;               /**/
    }
    
    ul#productWrapper{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;   /**/
    /*  justify-content: space-evenly;   /**/
    /*  justify-content: space-around;   /**/
    /*  justify-content: space-between;   /**/
      margin: 0 auto;
      padding: 0;
    /*  border: 1px solid #999;     /**/
      list-style: none;
    }

    li.productImage,
    li.productDetails{
      width: 300px;
      margin: 20px 40px 10px 40px;   /**/
/*      margin: 20px 180px 10px 0px;   /**/
/*      margin: 20px 40px 10px 0px;   /**/
/*      margin: 20px 20px 10px 20px;   /**/
/*      margin: 20px 20px 10px 0px;   /**/
      padding: 0px;
      border: none;
    }

    li.productImage img{
      width: 300px;
      border: 1pt solid #999;
      box-shadow: 5px 5px 15px 0px #AAA;
    }

    li.productDetails h2{
      margin: 0;
      padding: 0.4em 0;
      font-size: 2em;
      font-weight: bold;
    }
    
    li.productDetails p{
      margin: 0;
      padding: 0 0 0.2em 0;
    }

    li.productDetails hr{
      margin: 0.5em 0 1.5em 0;
      padding: 0;
      color: #CCC;
    }
    
    li.productDetails .productPrice{
      margin: 0;
      padding: 0 0 1em 0;
      font-size: 1.5em;
      font-weight: bold;
    }

    form#freeBookCheckout{
      margin: 10px 0;
    /*  padding: 0 0 0 125px;     /**/
      text-align: left;
    }

    form#freeBookCheckout fieldset{
      border: none;
    }

  </style>
</head>

<body>
<!--
  <div>
    <img src="https://i.imgur.com/c10UTWv.png" alt="" />    
  </div>

  <div>
    <h2>101 UX Principles</h2>
    <p>by Will Grant</p>
    <p>eBook</p>
    <p>$44.99</p>
    <p>BUTTON HERE</p>
  </div>
-->

  <div id="pageBody_ProductDetails">
    <ul id="productWrapper">
      
      <!-- Product Image -->
      <li class="productImage">
        <img src="https://i.imgur.com/c10UTWv.png" alt="" />
      </li>
      
      <!-- Product Details -->
      <li class="productDetails">
        <h2>101 UX Principles</h2>
        <p class="productAuthor">by Will Grant</p>
        <hr>
        <p class="productFormat">eBook</p>
        <p class="productPrice">$44.99</p>
        
        <!-- FREE BOOK CHECKOUT FORM -->
        <form id="freeBookCheckout" action="" method="post">
          <fieldset>
            <!-- Submit Form -->
            <input type="submit" name="freeBookCheckout" class="button" value="Checkout" />
          </fieldset>
        </form>
      </li>
    </ul>
  </div>

</body>
</html>


Second, here is a stripped down version of the above file, but here I tried to apply your width formula and that isn't work very well at all. The problem is that if I want to add a margin/padding around the product image and product details, then things wrap to two lines. For the life of me I cannot figure out what I am doing wrong... 
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <title>z_product-details_new.html</title>

  <style media="screen">
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    div#container{
      display: flex;
      flex-wrap: wrap;
    }

    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      box-sizing: border-box;             /* ??? */
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }
    
    li#productImage{
      width: 100%;
      max-width: 300px;
      margin: 0;
      padding: 0;
    }

    li#productImage img{
      width: 300px;
    }
    
    li#productDetails{
      width: calc(100% - 300px);    /**/
      padding: 0 0 0 100px;
    }
  </style>
</head>

<body>
  <div id="container">

    <ul>
      <!-- Product Image -->
      <li id="productImage">
        <img src="https://i.imgur.com/c10UTWv.png" alt="" />
      </li>
      
      <!-- Product Details -->
      <li id="productDetails">
        Product Title here...<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem. 
      </li>
    </ul>

  </div><!-- #container -->

</body>

</html>


Questions:

1.) What is wrong with my second example?

2.) Am I better off with the first sample using a fixed width for the product details?

3.) It still feels a little weird using UL/LI for this since most of the examples I have seen on MDN just use DIVs…

2

Hi there UpstateLeafPeeper

you have a box modal problem here…

    li#productDetails{
      width: calc(100% - 300px);    /**/
      padding: 0 0 0 100px;
    }

To cure this problem you can use either this solution…

    li#productDetails{
      width: calc(100% - 400px);    /**/
    }

…or this…

    li#productDetails{
      width: calc(100% - 300px);    /**/
      box-sizing: border-box;
    }

Further reading:-

MDN - What is the CSS box model?

ccothead

3

@coothead,

It’s amazing what one line of code can do! :wink:

So of the two samples I posted above, which approach do you think is better?

I’m starting to rethink things, and leaning towards my first sample - especially since I am not ready to go entirely responsive yet.

4

Given the choice, then I would use…

 #productDetails{
    width: calc( 100% - 25em );    
  }

…as it is one line less code. :winky:

Also there is no need for the li
and em is preferable unit to px.

coothead

5

You answered the wrong question… :wink:

I asked of the two code samples that I posted last night, which you think is better?

The first/original sample uses a fixed-width LI of 300px for the image, and another fixed-width LI of 300px for the product details.

The second/nex sample, is based on what you taught me yesterday, where the first LI is still fixed-width, but the second LI is variable width and gets its width using this calculation…

width: calc(100% - 25em);

I’m leaning towards the fixed-with for both LI’s, because unlike the example you helped me with yesterday that had paragraphs of text in it, I think the product details are fairly set in size. Also, having two fixed-width LI’s can still be responsive because using FlexBox, the second LI can wrap under the first LI as the screen gets smaller.

6

I never looked at the first sample that you posted. :unhappy:

What I will say though, is that, generally speaking,
I prefer not to use fixed widths. :eek:

You may draw your own conclusions from that. :biggrin:

coothead

1 Like
7

Maybe you should? :biggrin:

I think it works better for what I am trying to do in this situation.

I can see their downsides, but if you look at how my first code sample behaves, when the screen gets too narrow, the second box just drops below the first, so as long as you aren’t on a watch, I think it still handles most scenarios.

Lots of ways to approach all of this, for sure.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.