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

    Need help with CSS, boxes won't fit in a main box

    I need help with CSS putting smaller boxes into a big box, right now it is erroring out by making boxes outside the bigger box. Here is my coding:

    CSS:

    Code:
    #prizebox{
        width:750px;
        height:150px;
        background-color:#F0F8FF;
    }
    
    #prizepic{
        width:200px;
        height:100px;
        background-color:#FF0000;
    }
    
    #prizedescription{
        width:545px;
        height:100px;
        background-color:#123456;
        float:right;
    }
    
    #prizeleft{
        width:350px;
        height:45px;
        background-color:#123bbc;
        float:left;
    }
    
    #prizeright{
        width:350px;
        height:45px;
        background-color:#12ffff;
        float:right;
    }
    HTML code:
    Code:
    <div id="prizebox">
                                <div id="prizepic">
                                    Picture here
                                </div>
                                <div id="prizedescription">
                                    THIS IS A PRIZE DESCRIPTION
                                </div>
                                <div id="prizeleft">
                                    Prize(s) Left: 1000
                                    <BR />
                                    Prize Cost: 100 Points
                                </div>
                                <div id="prizeright">
                                    Prize(s) Rewarded: 100
                                    <BR />
                                    MyKP Price: 50 Points
                                </div>
                            </div>
    All help would be appreciated, Thanks

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Just off the top of my head:
    1. Float "prizepic", "prizeleft", and "prizeright" to the left.
    2. Reset "prizedescription" so that it has float: none.(default).
    3. Have "prizeleft" clear left floats (which will force "prizeright" to also clear "prizepic" since a float can't appear above a previous float).
    4. Add a 50-pixel left margin to "prizeright" to ensure that it abuts the right side of "prizebox".

    Of course, this layout will fall apart if the user resizes the text such that it's bigger than the designated space. I'd consider overflow: auto on "prizebox" to allow scrollbars. That will ensure that text and floats can never escape the box, will always be visible, and can't destroy other parts of your layout.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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