Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    div float position problem

    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:
    Code:
    		
    .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

    Thanks.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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


    Here is my CSS:

    Code:
    .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:
    Code:
    <!--  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



    .
    Last edited by jeddi; 06-16-2012 at 10:36 AM.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You have two instances of .text_box in your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thank you for pointing that out.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •