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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Expandable boxes floating in a container

    Ey guys it's my first time making a website with the use of css and I really like it but still I have a little question about it.
    I made a website and I wanted to make expandable boxes where I can put text in.
    on the following link everything looks ok:
    http://hylix.netau.net/mof/
    but as soon as i want to add another box (on the left side) I get this effect.
    http://hylix.netau.net/mof/index2.html
    basicly I just want the little boxes to stay on the left side and the big boxes at the right side.
    I tried to do this with float:left; or float:right; but it didnt worked out as I wanted it to.
    someone got a good tip on how to fix this? or if there is even a better way of doing this?
    also I am sorry if the css/html is sloppy, Its my first time

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Hylix,
    In your second link you are seeing the float drop because your box model is off.

    Your .container is 990px wide so the total width of everything you put in it cannot exceed that.
    When you put 2 .left_box's in the width works out to 1182px. It works with one .left_box because the total width is only 966px and that fits.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes I also saw that but then I get to my problem I don't want the left box to appear next to the other left box I would love to have them under eachother. Or is it better to use 2 containers here?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Hylix View Post
    Yes I also saw that but then I get to my problem I don't want the left box to appear next to the other left box I would love to have them under eachother. Or is it better to use 2 containers here?
    div.left_box {
    width: 216px;
    background: url("images/text/box-bgb.png") top left;
    padding-top: 30px;
    float: left;
    clear: left;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Hylix (05-30-2010)

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow thnx a lot for that, now I have 1 issue remaining. if i add more left boxes the right box will chance its position to the lowest left box like this:
    http://hylix.netau.net/mof/
    already tried the clear:right; but I saw that that wasn't fixing this problem, any other way to do this?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,743
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Hylix View Post
    Wow thnx a lot for that, now I have 1 issue remaining. if i add more left boxes the right box will chance its position to the lowest left box like this:
    http://hylix.netau.net/mof/
    already tried the clear:right; but I saw that that wasn't fixing this problem, any other way to do this?
    Look what happens when you change the order of your floats in the markup -
    Code:
    <div class="container">
    
    
    
    
    <div class="left_box">
        	<div class="middle">
        		<div class="inside">
        			<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
       		</div>
        <img src="images/text/box-bgt.png" alt="bottom">
      </div>
    </div>
    
    <div class="right_box">
        	<div class="middle">
        		<div class="inside">
        			<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
       	 </div>
        <img src="images/text/text-bottom.png" alt="bottom">
      </div>
    </div>    
    
    <div class="right_box">
        	<div class="middle">
        		<div class="inside">
        			<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
       	 </div>
        <img src="images/text/text-bottom.png" alt="bottom">
      </div>
    </div>  
    
    <div class="left_box">
        	<div class="middle">
        		<div class="inside">
        			<p>Content goes here! Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
       		</div>
        <img src="images/text/box-bgt.png" alt="bottom">
      </div>
    </div>
    
    
    
    
    
    
    
    <div class="spacer"><!-- No Content --></div>
    
    
    
    
       
    </div>
    That will probably mess up again when more content is added to those right boxes. Your layout might work better with a div containing those .right_box's so they are not affected by other floats. Have a look at a basic two-column layout here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Hylix (05-31-2010)

  • #7
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I just did and it works, Thnx a lot for all your help!


  •  

    Posting Permissions

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