Indent A Box From Left and Top Margins
myStyle.css
div.txt
{
width: 600px;
background-color: cyan;
margin-left: 50px;
margin-top: 50px;
}
Your HTML page
<html>
<head>
<link rel="stylesheet" href="myStyle.css" type="text/css">
</head>
<body>
<div class="txt">
Sed tamen sine me loqui. Post et ridere coepi, dormiens primo,
deinde vigilans. hoc enim de me mihi indicatum est et credidi,
quoniam sic videmus alios infantes; namista mea non memini.
et ecce paulatim sentiebam, ubi essem, et voluntates meas
volebam ostendere eis, per quos implerentur, et non poteram,
quia illae intus erant, foris autem illi, nec ullo suo sensu
valebant introire in animam meam. itaque iactabam et membra et
voces, signa similia voluntatibus meis, pauca quae poteram,
qualia poteram: non enim erant veri similia. et cum mihi non
obtemperabatur, vel non intellecto vel ne obesset.
</div>
</body>
</html>
Center A Box On A Page
myStyle.css
body
{
text-align: center;
}
div.txt
{
width: 600px;
background-color: cyan;
margin-left: auto;
margin-right: auto;
text-align: left;
}
Your HTML page
<html>
<head>
<link rel="stylesheet" href="myStyle.css" type="text/css">
</head>
<body>
<div class="txt">
quisquam se faciendi erit artifex? ...
</div>
</body>
</html>
Float Two Boxes
table.css
/* Left margin column */
div.one
{
float: left;
width: 100px;
background-color: cyan;
margin-left: 50px;
margin-right: 10px;
margin-top: 50px;
}
/* Main text column */
div.two
{
float: left;
width: 500px;
background-color: yellow;
margin-top: 50px;
}
Your HTML page
<html>
<head>
<link rel="stylesheet" href="table.css" type="text/css">
</head>
<body>
<div class="one">
enim de me mihi indicatum .........
</div>
<div class="two">
Sed tamen sine me loqui apud misericordiam ...........
</div>
</body>
</html>
Float Three Boxes
table.css
/* Left column */
div.one
{
float: left;
width: 100px;
background-color: yellow;
margin-left: 50px;
margin-right: 10px;
margin-top: 50px;
}
/* Middle text box */
div.two
{
float: left;
width: 500px;
background-color: cyan;
margin-top: 50px;
}
/* Right column */
div.three
{
float: left;
width: 100px;
background-color: blue;
margin-left: 10px;
margin-top: 50px;
}
Your HTML page
<html>
<head>
<link rel="stylesheet" href="table.css" type="text/css">
</head>
<body>
<div class="one">
enim de me mihi indicatum ...
</div>
<div class="two">
Sed tamen sine me loqui ...
</div>
<div class="three">
enim de me mihi indicatum est ...
</div>
</body>
</html>
Embed A Picture Upper Left
Here is the picture:
table.css
div.one /* header region */
{
width: 700px;
background-color: red;
margin-left: 50px;
margin-top: 50px;
height: 100px;
}
div.two /* left bar */
{
float: left;
width: 100px;
background-color: red;
margin-left: 50px;
}
div.three /* middle text */
{
float: left;
width: 600px;
background-color: cyan;
}
/* Image in upper left corner */
img.headerPic
{
float: left;
border-style: none;
}
Your HTML page
<html>
<head>
<link rel="stylesheet" href="table.css" type="text/css">
</head>
<body>
<div class="one">
<img class="headerPic" src="samplePic.gif">
HEADER.....
</div>
<div class="two">
LEFT BAR ....
enim de me mihi indicatum ...
</div>
<div class="three">
TEXT REGION ....
Sed tamen sine me loqui ...
</div>
</body>
</html>