|
|
Posted by Jonathan N. Little on 11/27/13 11:57
Cerebral Believer wrote:
> OK,
>
> Please forgive my ignorance, I am a newbie at all this and haven't got round
> to an indepth sudy of .css on my course. As far as I know static
> positioning should arrange elements in document flow (according to the way
> the HTML is naturally formed). I thought the top, left, right and bottom
> attributes defined the exact area an element should occupy on a page. I am
> not at all sure about inline elements, but having toyed with other values,
> this seemed to be the one that produced the desired effect.
Okay how about this little demo...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layout template</title>
<style type="text/css">
BODY { margin: 0; padding: 0; width: 100%}
/* I use a bottom margin to show separate sections */
.stooges {
clear: both; width: 100%; margin-bottom: .5em;
}
/* 31% is an approx to factor in padding... */
.moe {
float: left; width: 31%; color: #500; background-color: #fee;
}
/* like moe but added right margin for collapsed padding of curly */
.larry {
margin-right: 1em; float: left; width: 31%; color: #050;
background-color: #efe;
}
.curly {
color: #005; background-color: #eef;
}
/* again I use a bottom margin to show separate sections */
.shep {
margin-bottom: .5em; clear: both; width: auto; color: #505;
background-color: #fef;
}
/* reasonable visual padding for sections */
.moe, .larry, .curly, .shep { padding: 1em; }
</style>
</head>
<body>
<div class="stooges">
<div class="moe">This is div 1</div>
<div class="larry">This is div 2</div>
<div class="curly">This is div 3</div>
</div>
<div class="stooges">
<div class="moe">This is div 4</div>
<div class="larry">This is div 5</div>
<div class="curly">This is div 6</div>
</div>
<div class="shep">This is div 7</div>
<div class="shep">This is div 8</div>
<div class="shep">This is div 9</div>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|