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 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How do I position these boxes? Now resolved.

    How do I position these boxes so that the horizontal box is next to the vertical one. Like a cross laid on its side.

    Still trying hard to understand css.

    http://exitfegs.co.uk/aboxes.html

    Frank
    Last edited by effpeetee; 02-22-2008 at 04:36 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <style type="text/css">
    
    *{margin:0;
    padding:0;}
    
    html,body{height:100&#37;;
    width:100%;}
    
    #VBox {border: solid #000000 5px;
    background-color: red;
    padding: 5px 20px;
    width: 10%;
    margin-left:1%;
    color: blue;
    float:left;
    clear:left;
    }
    #HBox {
    margin-top:75px;
    border: solid #000000 5px;
    background-color: blue;
    padding: 5px 20px;
    margin:1%;
    width: 80%;
    color: white;
    }
    try that and see what happens

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Code:
    #VBox {border: solid #000000 5px;
    background-color: red;
    padding: 5px 20px;
    width: 10&#37;;
    margin-left:1%;
    color: blue;
    float:left;
    }
    #HBox {
    float:right;
    border: solid #000000 5px;
    background-color: blue;
    padding: 5px 20px;
    margin:1%;
    width: 80%;
    color: white;
    }
    I think that should fix it.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks to both. Both worked OK. I must try to understand why though. I am still getting by, by using other peoples code that works and copying it.
    This was an attempt to do it myself.

    Ah well! back to the drawing board. Anyone know where I can get a replacement for my 82 year old brain?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    *opens head* Here, try mine. It might not be an upgrade, though.


    As for why my example works, the only thing I changed was adding the float:left. In your code, you set the horizontal box to float:right (which it did), but did not assign a position to the vertical box, so it was automatically positioned directly below the previous element. Assigning the float:left positioned it next to the other floated element.



    With all that said, I think I just confused myself, I hope it makes sense to you.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by Aceramic View Post
    *opens head* Here, try mine. It might not be an upgrade, though.


    As for why my example works, the only thing I changed was adding the float:left. In your code, you set the horizontal box to float:right (which it did), but did not assign a position to the vertical box, so it was automatically positioned directly below the previous element. Assigning the float:left positioned it next to the other floated element.



    With all that said, I think I just confused myself, I hope it makes sense to you.
    Thanks, the explanation helps a lot. It is something that I didn't think of.
    It's funny. When I was at college, before the war, among other things I learned the formula to solve a quadratic equation. Also the trigonmetric ratios. I have never had occasion to use either since then, but I have never forgotten them. Now I can't even remember what I was going to write next================?

    Regards,

    Frank

    PS I still remember my RAF number 3030279, Taylor F P
    Last edited by effpeetee; 02-22-2008 at 04:55 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Amazing how our minds (don't) work, isn't it?

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    AMEN to that
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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