Divisions

position:absolute; - - - - - - - static (default), relative, absolute, fixed
width:320px; - - - - - - - - - - fixed pixels or percentage of page
vertical-position:absolute;
top:20px;
height:240px
margin:10px;

Margin - Individual sides:

margin-top:20px;
margin-bottom:20px;
margin-right:20px
margin-left:20px;

Margin - Shorthand property (100px from top 50px from left):

margin:100px 50px;

The margin property can have from one to four values:

margin:25px 50px 75px 100px; (top, right, bottom, left)
margin:25px 50px 75px; (top, right and left - 50px - and bottom)
margin:25px 50px; (top and bottom, left and right)
margin:25px; (all four margins are 25px)

padding:10px;
color:#3f4267;
background-color:#ffffff; (white)
opacity:0.5;

border:5px solid gray; top, right, bottom, left; dashed, dotted, solid, double

<--- This division is defined in the body of page:

<div style="position:absolute; left:10px; width:400px; vertical-position:absolute; top:20px; height:640px;
padding:2px; border-radius:10px; border:2px solid #3f6742;"><p><small> ... </small></p></div>

logos.png

logos.png

logos.png

Flex-Container:

<style>
.flex-container
{
display:flex;
position:absolute;
left:500px;
vertical-postion:absolute;
top:180px;
color:#3f4267;
background-color:#ffffff;
border:1px solid;
align-items:center;
}
.flex-container > div
{
background-color: #ffffff;
align-items:center;
align-items:top;
border:1px solid;
}
</style>

Defined in the head section of the page --->:

<div class="flex-container">

<div><p class="center" style="background-color:#69673e"><img src="logos.png" alt="logos.png"></p></div>

<div><p class="center" style="background-color:#3f6742"><img src="logos.png" alt="logos.png"></p></div>

<div><p class="center" style="background-color:#3f4267"><img src="logos.png" alt="logos.png"></p></div>

 

code5.htm | RanQuist.net