the class inside Div

Forum Moderators: not2easy

Message Too Old, No Replies

the class inside Div

ryanpark

4:33 am on Dec 10, 2007 (gmt 0)

I am learning CSS from scratch. I just can not find why the class can't be placed in div area.
Please refer the following codes:

You can see what I mean in firefox.

It will be very appreciate if you let me know the reasons
Thanks

<STYLE type="text/css">
#content {
width:853px;
background: #fff;
padding:0 28px;
border-bottom:11px solid #002D56;
border-left:11px solid #002D56;
border-right:11px solid #002D56;
}

#content .leftcol {
float: left;
width: 148px;
}
</style>
</head>

<body>
<div id="content">
<div class="leftcol">I am angry</div>
</div>
</body>
</html>

JAB Creations

8:47 am on Dec 10, 2007 (gmt 0)

What is the visual you are trying to achieve? The code looks fine in general as you have the selectors chosen correctly.

penders

10:02 am on Dec 10, 2007 (gmt 0)

As JAB states, your code looks fine, but because the entire contents of your #content div is floated (ie. taken out of the flow of the page), your #content div may be collapsing, since it no longer contains anything in the flow of the page.

A way round this used to be to add a clearing DIV inside your #content div, after your floated items to specifically make the #content DIV contain the floated items. However, a better (CSS only) solution is to simply give your #content a

overflow:hidden;

style.

Also, try adding a background-color to your .leftcol rule - simply to aid debugging. You should see that the style is being applied.

ryanpark

3:08 am on Dec 11, 2007 (gmt 0)

Thanks!