...

View Full Version : div float position problem



jeddi
06-15-2012, 05:23 PM
Hi,

I am trying to get my three boxes to float to the left underneath each other.

This is what it looks like now:

http://expressresponse.net/

You see those 3 red boxes labelled "FAQ", "Simple Page Example Sites" and
"Articles About Simple Page Sites", well I am trying to stack them underneath each other on the left hand side.

Then the text box should float left up against them.

This is my css for those boxes:



.text_box{
width:540px;
float:left;
clear:left;
text-align: left;
margin: 20px 20px 20px 40px;
color:000;
font-size: 22px;
line-height: 30px;
}

.faq_box{
width:300px;
float:left;
text-align: left;
margin: 20px 20px 20px 40px;
color:maroon;
font-size: 18px;
line-height: 24px;
padding: 0px 0px 0px 20px;
border:1px solid maroon;
}


and the HTML is clear in the source - though I can post it here if that's easier

Can any one see why they are not floating left?
I tried clear:left; but that didn't help :confused:

Thanks.


.

abduraooft
06-16-2012, 09:24 AM
Set float:left;clear:left; width:300px; on faq_boxs and then
"just" a margin-left: 300px; on the text_box. If you comment all other float/clear/widths affecting those 4 boxes, you'll get the desired output.

jeddi
06-16-2012, 10:33 AM
Thanks,

I think I had mistakely put the "float:clear;" on the
text_box instead of the faq_box.

(Not quite sure what I was supposed to comment out though)

There is something very strange going on with the text_box though.

In the text_box I have set the width to 540px and color to "000"
and yet both these values are not being used, it looks like the values from
the faq_box are being used.

Here is what it looks like now:

http://www.expressresponse.net/

The HTML is clearly stating class=text_box so I don't know why
this is happening :o


Here is my CSS:



.faq_box{
width:300px;
float:left;
clear:left;
text-align: left;
margin: 20px 20px 20px 40px;
color:maroon;
font-size: 18px;
line-height: 24px;
padding: 0px 0px 0px 20px;
border:1px solid maroon;
}

.text_box{
width:540px;
float:left;
text-align: left;
margin-left: 300px;
color:000;
font-size: 22px;
line-height: 30px;
}

Here is my HTML:



<!-- Text Box -->
<div class="text_box">
There are many times blah blah blah ...
<br><br>
</div> <!-- end of Text Box -->



Why is the Text_box CSS not working ?

Thanks



.

abduraooft
06-16-2012, 10:51 AM
You have two instances of .text_box in your CSS

jeddi
06-17-2012, 05:03 PM
Thank you for pointing that out.
:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum