...

View Full Version : Need help with CSS, boxes won't fit in a main box



kuzco
08-01-2010, 01:34 AM
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:



#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:


<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

Arbitrator
08-01-2010, 03:04 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum