I'm working on a 4-column page and trying to insert content. Everything is functioning properly except for getting my first div to align to the top in inline-blocks. As a newbie, I feel like I must be overlooking something simple. (I've tried using padding: 0; in the divs). Thanks. Milt.
<html>
<style>
html, body, #content { margin: 0px; height: 100%; width: 100%; padding: 0px;}
div.outer { background-color: lightgreen }
div.inner { display: inline-block; }
div.WebTopic { width: 190px;}
.col {
position: absolute;
top: 0px; bottom: 0px;
margin: left: 10px;
border: 1px solid black;
background-color: seashell;
}
.col-1 { left: 0px; width: 400px; top: 0px;}
.col-2 { left: 401px; width: 200px; top 0px; }
.col-3 { left: 601px; width: 400px; }
.col-4 { left: 1001px; width: 50px; }
</style>
<body>
<div id="content">
<div class="col col-1">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top.</p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 1 END -->
<p>Stuff here in usual block mode</p>
<!-- OUTER 2 START -->
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>HTML is a markup language that is used for creating web pages. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. </p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 2 END -->
</div>
<div class="col col-2">
COLUMN 2 -------------
</div>
<!-- COLUMN 3 START -->
<div class="col col-3">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top. Tons of text. Tons of text. Tons of text. Tons of text. Tons of text. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div>
</div>
<div class="col col-4">
COL 4
</div>
</body>
<html>