Width: 100% and Flexbox

HTML & CSS
1

In the past, in order to make web pages adjust to different screen sizes, you would set the page container to Width: 100%.

Do you still need to do this on the outermost container when using Flexbox?

Attached is a responsive template that I am working on. I think it looks pretty good as far as the page header/mast and the body container.

Now I would like to add a Flexbox container to the body so that I can build a photo gallery.

Should I convert my #containerBody from Width:100% to Flexbox, or should I nest a Flexbox sub-container inside my #containerBody and leave the Width: 100%?

sp_first_responsive_03.php (7.8 KB)

By the way, in this page template, it is important to me to have a space all the way around the page (i.e. a gutter) like I have now.

2

No template attached?

Do you mean this one? from a previous Topic?

Edit:

Corrected over enthusiastic predictive text - previous and not precious :slight_smile:

3

@John_Betong,

I messed the tag up. Try now. :wink:

1 Like
4

The default for HTML blocks is 100% so accept the default and create the following CSS which works for me in nearly all cases:

Also using the HTML Document Definition List saves messing on with sub-titles, formatting blurb, etc.

<!DOCTYPE HTML><html lang="en-gb">
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title> Title goes here </title>
<style>
body {
  font-family: BlinkMacSystemFont, apple-system, 
    'Segoe UI', roboto, helvetica, arial, sans-serif;
  font-weight: normal; font-size: 1em; line-height: 1.4em;
  background-color: #f3f3f3; color: #000;
}
dd   {margin: 0.88em 1em; background-color: #eee;}
.bd1 {border: solid 1px #ddd;}
.bgr {background-color: RED;} /* DEBUG */
.bge {background-color: #eee;} 
.bgs {background-color: snow;}
.mga {margin: 0 auto;}
.ooo {margin: 0; padding: 0;}
.p42 {padding: 0.42em;}
.w88 {width:88%; max-width: 1024px;}
</style>
<body>
<h1> Title goes here </h1>
<dl class="w88 mga bgs bd1 XXXp42">
  <dt class="ooo bge fwb"> Sub-title goes here </dt>
  <dd> Blurb goes here  </dd>
  <dd> and here  </dd>
  <dd> and here  </dd>
</dl>
</body>
</html>

Screendump

Screenshot%20from%202019-11-30%2012-56-23
Screenshot%20from%202019-11-30%2012-56-23599Ă—533 15.4 KB

5

Nope, the default for width is auto. See https://developer.mozilla.org/en-US/docs/Web/CSS/width

3 Likes
6

Upon reflection I could start using margin: 0 6%; and make w88 redundant., One less tag must be better :slight_smile:

7

@John_Betong,

Thanks for the response - have no clue what you are talking about?! (I think you go on the wrong train at the station!) :lol:

Let me try again…

For the template I am working on, I created two containers…

First I created a container for the Mast…

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2em 1em 2em;
      background-color: #FFF;
    }

Then I created a container for the Body (Not the < body > body, but where the majority of a given web page’s content will go, i.e. below the Mast)…

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 6em 2em 2em 2em;
    }

As you can see, I made each width: 100% and I added padding to give me a gutter all the way around the web page header/content.

I like the way this looks and behaves with the fixed Mast.

Q1.) Do you SP gurus agree that this approach is acceptable, and “responsive” as well?

Since the above two container set up a basic page structure in which I can drop content, I am thinking this could be called my “page template”. Do you agree?

Next I am working on a gallery of items, and so I decided to mimic some FlexBox code that @coothead helped me out with a few weeks ago.

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

Q2.) Is it okay to place this Flexbox inside of my #containerBody?

The purpose of this thread is that I wasn’t sure if I should convert my #containerBody{ } to a Flexbox…

It seems to me that it is better to keep #containerBody{ } as-is because…

  • It provides an outer-most container for page content
  • It gives me the gutter I want
  • It should adapt to any screen size from desktop to moble
  • It is agnostic and doesn’t user Flexbox, which may not always apply to a situation.

Q3.) Do you agree that it is best to have #containerBody{ } use Width:100% and then add a sub-container like .flexBox{ } inside of it as needed?

Attached is all of my code for this ever evolving template…
sp_gallery-02.php (9.6 KB)


Thanks for the help! :slight_smile:

8

I will try again to explain…

I was hoping the supplied demo would be downloaded, tested and modified to suit your requirements.

Please note that even though your example is responsive it is also rigid. Reminds of grabbing the whole space on a blackboard and leaving room for nothing else. The example uses two fixed full-width blocks, stacked on top of each other and take up the whole page.

Flex was designed to simplify the rearrangement of numerous inline-blocks.

I made some very small changes to my demo.

Screenshots

ulp-Screenshot%20from%202019-12-01%2010-37-51
ulp-Screenshot%20from%202019-12-01%2010-37-51320Ă—1031 26.7 KB

ulp-Screenshot%20from%202019-12-01%2010-38-27
ulp-Screenshot%20from%202019-12-01%2010-38-27668Ă—1031 34.4 KB

ulp-Screenshot%20from%202019-12-01%2010-38-57
ulp-Screenshot%20from%202019-12-01%2010-38-57500Ă—1031 32.8 KB

ulp-Screenshot%20from%202019-12-01%2010-40-18
ulp-Screenshot%20from%202019-12-01%2010-40-18917Ă—1031 39.8 KB

ulp-Screenshot%20from%202019-12-01%2011-05-28
ulp-Screenshot%20from%202019-12-01%2011-05-28991Ă—1031 41.3 KB

Source script

<?php 
declare(strict_types=1);


?><!doctype html><html lang="en-gb">
<head>
<meta charset="utf-8">
<meta 
  name="viewport" 
  content="width=device-width,height=device-height,initial-scale=1">
<title> Title goes here </title>
<style>
body {
  font-family: BlinkMacSystemFont, apple-system, 
    'Segoe UI', roboto, helvetica, arial, sans-serif;
  font-weight: normal; font-size: 1em; line-height: 1.4em;
  background-color: rebeccapurple; color: snow;
}
/* Logo Stuff */
  h1 {
    padding: 0 0 0.42em 0; 
    border-bottom: dotted 3px #00f;
    width: auto;
  }
/* CONTENT Stuff */
  dl   {
    color: black;
    display: inline-block; 
    margin: 0.42em 2em;    
    text-align: left;
  } 
  dl dd{margin: 0.88em 1em; background-color: lime;}
  dl dt{background-color: yellow;}
/* Colour Stuff */
  .bd1 {border: solid 1px #ddd;}
  .bga {background-color: aqua;} 
  .bge {background-color: #eee;} 
  .bgr {background-color: RED;} 
  .bgs {background-color: snow;}
  .fg0 {color: black;}
/* Positioning Stuff */
  .mg6 {margin: 6em 0;}
  .poB {bottom: 0;} .poT {top: 0;}
  .pof {position: fixed;}
  .p42 {padding: 0.42em;}
  .tac {text-align: center;}
  .w88 {width:88%;} .w99 {width:100%;}
  .z02 {z-index: 2;}
</style>
<body>

  <div class="pof poT w99 bga fg0 z02 ">
    <h1 class=""> title goes here </h1>
  </div>  

  <div class="mg6 tac">

    <dl class="bgr bd1">
      <dt class="bge fwb"> Sub-title goes here </dt>
      <dd> Blurb goes here  </dd>
      <dd> and here  </dd>
      <dd> and here  </dd>
    </dl>

    <dl class="bgr bd1">
      <dt class="bge fwb"> Sub-title goes here </dt>
      <dd> Blurb goes here  </dd>
      <dd> and here and here and here and here  </dd>
      <dd> and here  </dd>
    </dl>

    <dl class="bgr bd1">
      <dt class="bge fwb"> Sub-title goes here </dt>
      <dd> Blurb  </dd>
      <dd> here  </dd>
      <dd> and   </dd>
      <dd> here  </dd>
    </dl>

    <dl class="bgr bd1">
      <dt class="bge fwb"> Sub-title goes here </dt>
      <dd> Blurb </dd>
      <dd> here  </dd>
      <dd> and   </dd>
      <dd> here  </dd>
      <dd> also  </dd>
      <dd> here   </dd>
      <dd> and   </dd>
    </dl>

  </div><!-- mg6 -->  

  <div class="pof poB w99 bga fg0 tac">
    fixed footer goes here
  </div>
</body>
</html>

Please excuse the selected colours, they were chosen to easily show the inline-block outlines, honest :slight_smile:

Edit:

Added maximum full screen width dump.

9

First, #containerMast_fixed is indeed fixed, however, #containerBody is NOT fixed.

Second, yes, each container “covers the entire blackboard”, but that is the point.

Third, you fail to give me credit for inserting a .flexBox{ } container inside of #containerBody. And that Flexbox allows anything inside of it to flow around and adapt to varying screen sizes, so i don’t follow your assertions.

So I looked at your example and code and here are my thoughts - nothing personal…

1.) Your use of DL doesn’t seem right. You are missing closing tags and the formatting makes it hard to follow. (Well-formatted code is legible code!)

2.) Because your classes are so cryptic, it makes it much harder to decipher not having written it, and good code should be easy to read by all.

3.) If I had boxes/items inside my Flexbox, then I believe they would behave exactly as your example does. Put another way, we just took different approaches.

4.) However, I think Flexbox is a superior way to make your site respond/adapt versus relying on inline-block div’s. Flexbox just seems much more robust and gives you better control that you do NOT have using inline-blocks.

5.) Your approach works, but seems outdated when consdiering Flexbox.

I appreciate your suggestions, and that is how we all learn new ways to think. But I think you were being unfair to my design because you are judging it on something it didn’t contain yet which are Flex items inside the Flexbox in the #containerBody div.

Just my two cents… :slight_smile:

10

I fail to see why the DL does not seem right and I cannot see any missing “closing tags”. Validation seems OK.

The use of Three Letter Acronyms is a lot easier than long descriptive names and easier to change how a block renders by adding or removing/renaming (prefix XXXtla so not in use). The TLAs can easily be replaced with a single longer name that applies the individual TLAs. Try prefixing the class TLAs with XXX and spot the difference

Whatever floats your boat :frowning:

I have utilised PHP to create DLs with titles, images and descriptions. Source below.

I am not familiar with FlexBox and find the standard CSS works wonders as you can see below: :slight_smile:

Source Script:

<?php 
declare(strict_types=1);

$aImgs = [
  ['title-001', '/WORKSPACE/images/IMG_2151.JPG', 'Blur goes here - 001'],
  ['title-002', '/WORKSPACE/images/IMG_2152.JPG', 'Blur goes here - 002'],
  ['title-003', '/WORKSPACE/images/IMG_2153.JPG', 'Blur goes here - 003'],
  ['title-004', '/WORKSPACE/images/IMG_2154.JPG', 'Blur goes here - 004'],
  ['title-005', '/WORKSPACE/images/IMG_2155.JPG', 'Blur goes here - 005'],
  ['title-006', '/WORKSPACE/images/IMG_2156.JPG', 'Blur goes here - 006'],
];
$sDl = '';
  foreach($aImgs as $key => $aImg) :
    $img  = '<a href="#'    .$aImgs[$key][1] .'">' 
          .   '<img src="' .$aImgs[$key][1] 
          .   '" alt="image: ' .$key .'" '  
          .   ' title="' .$aImgs[$key][1] .'">'
          . '</a>'
          ;

    $sDl .= '<dl class="bgr bd1">'
          . '<dt class="bge fwb">' .$aImgs[$key][0] .'</dt>'
          . '<dd class="XXXtac dib bgt ">' .$img .'</dd>'
          . '<dd class="fss">filename:' .$aImgs[$key][1] .'</dd>'
          . '<dd>' .$aImgs[$key][2] .'</dd>'
          . '</dl>'
          ;
  endforeach;        

  $blurb = str_repeat('Blurb goes here and here and ', 42);

?><!doctype html><html lang="en-gb">
<head>
<meta charset="utf-8">
<meta 
  name="viewport" 
  content="width=device-width,height=device-height,initial-scale=1">
<title> Title goes here </title>
<style>
body {
  font-family: BlinkMacSystemFont, apple-system, 
    'Segoe UI', roboto, helvetica, arial, sans-serif;
  font-weight: normal; font-size: 1em; line-height: 1.4em;
  background-color: rebeccapurple; color: snow;
}
/* Logo Stuff */
  h1 {
    padding: 0 0 0.42em 0; 
    border-bottom: dotted 3px #00f;
    width: auto;
  }
/* CONTENT Stuff */
  dl   {
    color: black;
    display: inline-block; 
    margin: 0.42em 2em;    
    text-align: left;
  } 
  dl dd{margin: 0.88em 1em; background-color: lime;}
  dl dt{background-color: yellow;}
  dl dd a img{
    width: 120px; height: 120px;
    display: inline-block;
    border: 1px solid #999;
    background-color: snow;
    box-shadow: 5px 5px 15px 0 #AAA;
  }  
/* Colour Stuff */
  .bd1 {border: solid 1px #ddd;}
  .bga {background-color: aqua;} 
  .bge {background-color: #eee;} 
  .bgr {background-color: orange;} 
  .bgs {background-color: snow;}
  .fg0 {color: black;}
  .fss {font-size: small;}
/* Positioning Stuff */
  .mg2 {margin: 0 6%;}
  .mg6 {margin: 6em 0;}
  .poB {bottom: 0;} .poT {top: 0;}
  .pof {position: fixed;}
  .p42 {padding: 0.42em;}
  .tac {text-align: center;} .tal {text-align: left;}
  .w88 {width:88%;} .w99 {width:100%;}
  .z02 {z-index: 2;}
</style>
<body>

  <div class="pof poT w99 bga fg0 z02 ">
    <h1 class=""> title goes here </h1>
  </div>  

  <div class="mg6 tac">
    <?= $sDl ?>
  </div><!-- mg6 -->  

  <dl class="mg2 bgs fg0 tac">
    <dt class="tal"> Blurb goes here </dt>
    <dd>  <?= $blurb ?> </dd>
  </dl>

  <div class="pof poB w99 bga fg0 tac">
    fixed footer goes here
  </div>

</body>
</html>

Screen dump:

ulp-Screenshot%20from%202019-12-01%2023-16-08
ulp-Screenshot%20from%202019-12-01%2023-16-081049Ă—1031 54.6 KB

11

But flexbox is standard CSS. It’s not something new and fancy, it’s been around for a few years now. Heck, even IE10 had some support for it (in it’s own little way, but that’s beside the point).

So the question is not if float/inline-block way works wonders, but rather the question should be if you should still use them when more superior ways of laying out a page are available, such as flexbox and grid. The answer is a resounding no, you should not be using them anymore. Flexbox and grid offer a lot of options that are just plain impossible with inline-block/floats, or need a megaton of hacks to get to work.

For example, in your screendump, what if I want all those boxes to have equal height (not fixed height mind you, but just so the tallest box defines the height of all other boxes)? Doing this with floats etc would be a nightmare and probably involve javascripts to get the heights to work. With flexbox however such a layout is almost trivial and does not require javascript in any shape or form.

2 Likes
12

This is how I am used to seeing DL/DT/DD…

: The Description List element

FWIW, I think your use of DL/DT/DD is semantically wrong… :unhappy:

I see what you are trying to do, but for anyone not familiar with your scheme it is more confusing and more work than a help.

Since you created it, it may work better for you.

But I asked for feedback on what I had…

Why go create something alternative and not provide feedback on what I had?

I’m just reiterating what MDN says about Flexbox…

Yes, your sample code seems to be responsive, but I asked for feedback on the code I created, not on the code you created! :wink:

13

THIS <====

That was my earlier point!


Anywho, getting back to my OP…

@rpkamp, what do you think about the sample code (attachment) that I posted above?

Is it okay to have my #containerMast_fixed and #containerBody, and then to have my Flexbox inside of #containerBody?

I try to code in components, and while I could try to add a gutter to my Flexbox, it seems to me that splitting things up give greater flexability.

And to the debate that @John_Betong and I were having, with a Flexbox container inside of my #containerBody, I have lots of options depending on the content inside, whether that be text or page elements or a photo gallery.

Thoughts?

1 Like
14

Sure, that seems fine. I would just call it #containerMast though - fixed is part what it should look like, not part of what it is. That is, if you ever decided you don’t want it fixed any more you’d have to (ideally) remove _fixed from the name, so it doesn’t belong there.

Sure, makes sense to me.

1 Like
15

Whew! Glad to hear some positive feedback. Any other gurus have thoughts on this?

Well, the reason I appended “_fixed” on the end is because I was envisioning having a standard “#containerBody” ID/class that is not fixed, and so then I’d have a way to choose from both in my CSS library, as in…

#containerBody{  }
#containerBody_fixed{  }

Follow me?

One of my goals for 2020 is to come up with a better naming and filing convention for my CSS so it isn’t such a mess moving forward!! Others have mentioned different methodologies that might help me in this endeavor, but time will tell what I do.

Good to hear! :slight_smile:

16

Or perhaps, with css variables :slight_smile: you could, in your css “site configuration” section create a variable like

:root	{
		--mast-position:fixed;
		}

so that you could use one ID for the mast section template, and “configure” it to be fixed or static for this particular site, rather than coding the html for separate ID’s. Just a thought.

1 Like
17

Regret the delay, I have been busy and wanted to finish something else as quickly as possible.

The “boxes” are different heights because I was wanting to demonstrate how content could be added and still be responsive.

The thought did occur about the vertical positioning of the boxes and I made a small adjustment by adding the vertical-align: bottom; /* middle/top */ to the following:

/* CONTENT Stuff */
  dl   {
    color: black;
    display: inline-block; 
    margin: 0.42em 2em;    
    text-align: left;
    vertical-align: top;
  }

Online Demo

I am curious to know what improvements could be made using Flexbox.

18

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