Why is the body text covered by the css box?

[gert3d]

Why is the body text covered by the css box?

url: http://films.eusem.com/main/comscience-sum

relevant css:
------------------------------
#l-column {
background: #eeeeff;
position: absolute;
top: 150px;
align: left;
width: 160px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
border-width: 1px;
border-style: solid;
border-color: blue;
}



code at top of the page:
-----------------------------------------
<br/>

<div class = "l-column"> test left box<p/>
line 2<p/>
line 3,p/>
</div>

<div class="head01">The ComScience project<p></div>
etc ....

 

[LouTheDesigner]

Two things that you might want to change are your use of absolute positioning (refer to one of PixelPisher's Sticky's for positioning DIVs) and the way you define your class.

You say :

class = "l-column"

but in your CSS, you say:

#l-column

The # sign designates an ID, not a class. It should be changed to:

.l-column

and then you should change the absolute positioning.

-Lou

 

[gert3d]

Thanks for your help.
I got it right now:

#l-column {
float: left;
background: #eeeeff;
width: 160px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
border-width: 1px;
border-style: solid;
border-color: blue;
}

and

<div id = "l-column"> test left box<p/>
line 2<p/>
line 3,p/>
</div>

 

[LouTheDesigner]

Glad I could help.

-Lou

 

[PixelPusher]

...

<div id = "l-column"> test left box<p/>
line 2<p/>
line 3,p/>
</div>

gert3d,

One other quick thing, there should not be spaces between the attribute name, equals sign, and value. You paragraphs need to open and close correctly. Should look like this:

<div id="I-column">
   <p>test left box</p>
   <p>line 2</p>
   <p>line 3</p>
</div>