Float left problem

HTML & CSS
1

I am a newbie in css.
So I have a div with 2 subdivs.
I want these subdivs the one to be at the right of the page and the other at the left side…of the pages
I use this code that does not work.what is wrong?

 <div class="paging">
            <div  class="lefts" > test
            </div>
            <div class="thetext">
                <a href="auctionitem.php?cid=2">
                    &#902;&#947;&#947;&#949;&#955;&#959;&#953;</a>
                <b>Product:</b>----              
            </div>
    </div>

.paging { }
.paging.lefts {float: left;margin:0 5px 0 0;}
.paging.thetext { float: right;
clear: right;
margin: 4px;}

2 
<div class="paging">
            <div  class="lefts" > test
            </div>
            <div class="thetext">
                <a href="auctionitem.php?cid=2">
                    &#902;&#947;&#947;&#949;&#955;&#959;&#953;</a>
                <b>Product:</b>----              
            </div>
            [B][COLOR="#FF0000"]<div style="clear:both;">&nbsp;</div>[/COLOR][/B]
    </div>
3

You missed the descendant selector.


.paging .lefts {
	float: left;
	margin:0 5px 0 0;
}
.paging .thetext {
	float: right;
	clear: right;
	margin: 4px;
}

There’s a space (the descendant selector) that goes between the 2 classes.

e.g. .paging .lefts and not .paging.lefts

.paging.lefts would need a structure like this:

<div class=“paging lefts”> test </div>

Which of course doesn’t exist.

However I don’t see why you need to qualify those classes and why not simply say.


.lefts {
	float: left;
	margin:0 5px 0 0;
}
.thetext {
	float: right;
	clear: right;
	margin: 4px;
}

Try and think of better classnames than that though :slight_smile: Classnames should not be presntational but describe the function more generically (e.g. .title or .product)