User:Ccsmith/sandbox/wiki

 

 

two items centered side by side made to be equal in height
The two boxes are equal in height and are centered on the page even though they do not extend from one edge to the other. Box with text can be varied but the image cannot. It is always a fixed width. So defending the size of the text, the box with the text can grow in height but the image will not and therefore the boxes will not be equal in height.  Get Involved  Explore all the different ways you can help build the wiki through wiki projects and other local activities.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet efficitur eros. Pellentesque tincidunt faucibus lorem ac tempor. Integer a bibendum eros. Nullam feugiat sollicitudin urna, at aliquam tortor ullamcorper ac. Suspendisse neque lacus, cursus nec mauris a, cursus scelerisque lectus.

equal columns
No percentages or fixed widths required
 * Belknap
 * Carroll
 * Cheshire
 * Coös


 * Grafton
 * Hillsborough
 * Merrimack
 * Rockingham
 * Strafford
 * Sullivan

space around
Main Page Research Help Wiki Help Get Involved Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
The links above almost line up, but are a little bit different. Space around is equal space between the items, but this arrangement is centered items inside equal wide boxes. Which is better looking is a judgment call.

space between
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 in each line
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 and justified-content:center
Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
Main Page Research Help Wiki Help Get Involved

Flexbox table w/cell widths equal
 Beginning Dates for Major County Records Birth* Marriage Death* Court Land Probate Census 1882 1882  1880  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mollis turpis in aliquam. Vivamus semper nibh quis dui dapibus pellentesque. Vivamus ultrices enim vitae pretium lacinia. Quisque vestibulum euismod est, a congue velit placerat ut. Aenean blandit feugiat odio, nec sagittis tellus convallis non.

 Birth* Marriage Death* Court Land Probate Census

#|<< Previous Chapter Next Chapter >>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed elementum urna. Ut mollis, justo eget ornare finibus, lorem leo tempus orci, nec tincidunt est sem nec velit. Sed in ligula erat. Sed imperdiet leo vitae neque imperdiet, eu accumsan enim tempor. Nulla lacinia, ex sed placerat rutrum, ligula dui posuere massa, et consectetur dui est ultricies ipsum. Pellentesque turpis ipsum, ultrices et arcu eget, bibendum pretium ante. Etiam fringilla, risus faucibus fringilla ullamcorper, augue lectus cursus metus, nec efficitur ipsum neque ut lectus.

Try these out

 Exercises

Enter exercise questions here

Check your answers

 Quick Quiz

Enter quiz questions here

<div style="width:11.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

#|<< Previous Chapter Next Chapter >>

<div style="flex:0; order:2; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); min-width:200px; height:30px; border:1px solid black; margin-left:-12px">Get Involved in Wiki <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)"> <div style="flex:0; order:4; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); margin-left:-10px; min-width:200px; height:30px; border:1px solid black">Help:Wiki Help <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)">

Main Page Research Help Wiki Help Get Involved

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 20:06 Gardendale Alabama Family History Center ( diff | hist ).. (+87) .. Rickgwilliams ( talk | contribs | block )  ( Opening Hours and Charges for copying )  [ rollback 1 edit ] ( Tag Visual edit )

<div style="width:0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 19:20 Artical title (dif | hist) . . (+272)  . .  ccsmith (talk | contribs | block) (summary) [rollback 2 edits] ( Tag Visual edit)

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED