The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Make "div" Elements Act Like A Table With display: table

TODO: Pull subtitle into page object

This is a work in progress while I figure out how this works. I've seen very little about display: table and the related display properties. Seems they don't get much use. This is really just so I can get a basic idea of how it works

this is come content to mess with
and here is some more things to do with the thing
.
some line here

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Make "div" Elements Act Like A Table With display: table

-- warning

This is a work in progress while I figure out how
this works. I've seen very little about display: table
and the related display properties. Seems they don't
get much use. This is really just so I can get a 
basic idea of how it works

-- html
-- type: showabove 

<div class="tbl">
  <div class="tbl-row">
    <div class="tbl-cell">this is come content to mess with </div>
    <div class="tbl-cell">and here is some more things to do with the thing</div>
  </div>
  <div class="tbl-row">
    <div class="tbl-cell">.</div>
    <div class="tbl-cell">some line here</div>
  </div>
</div>

-- css
-- type: show

*, *::before, *::after {
  box-sizing: border-box;
}  

* {
  margin: 0;
}


.tbl {
  display: table;
  width: min(100% - 3rem, 80ch);
  outline: 1px solid yellow;
  > .tbl-row {
    display: table-row;
    outline: 1px solid green;
    > .tbl-cell {
      display: table-cell;
      outline: 1px solid blue;
    }
  }
}



-- categories
-- CSS 

-- groups

-- metadata
-- date: 2023-10-21 22:34:54
-- id: 2x6gppi1
-- site: aws
-- type: css-experiment 
-- status: published