Layout Problems

HTML & CSS
1

I have a video game website and I’ve hacked together some CSS to show achievements.

An example is here:

Game Guide Central | The Best Game Guides in the UNIVERSE

This is the code I use to create it:


<div><img src="http://www.gameguidecentral.com/images/achieves/brink_youveescapedtheark.jpg" align=left><div class="achievetop2"><div class="achievement2">You've escaped the Ark</div><div class="gspoints2">75 / Bronze</div></div>
<div class="achievebottom2"><div class="achievedescrip2">Win all main missions of the Resistance campaign (not including What-If missions)</div></div></div>

And then my CSS:


div.achievetop2{background:#EEE;font-size:18px;height:30px;margin-top:4px;padding:2px;}
div.achievebottom2{background:#EEE;color:#000;height:26px;margin-top:0;padding:2px 2px 2px 10px;}
div.achievement2{color:#000;float:left;font-weight:700;height:15px;margin-left:5px;width:auto;}
div.achievedescrip2{color:#000;float:left;margin-left:5px;width:auto;}
div.gspoints2{color:#000;font-size:18px;font-weight:700;text-align:right;width:auto;}

I have two problems with it.

1 - If the bottom line is too long it breaks it. I’d like it to wordwrap.
2 - If I put something in front of it in the page like a Google Ad it gets squeezed to the right and I want it to always be full length.

Any help is appreciated!

2

HI,

You are floating the element without a width which means it will try to be 100% wide and therefore as soon as text pushes it wide it will become 100% wide and drop to another line.

The element should not be floated but either use a margin-left to avoid the floated image or use overflow:hidden to create a rectangular box to the side of the floated image.

You also need to remove the height otherwise the element can’t grow and you should also clear each row before a new one begins.

Changes/additions in bold:


[B].achieve{
    overflow:hidden;
    zoom:1.0;
    clear:both;
    background:#EEE;
margin:0 0 4px;
}
.achieve .imgleft {float:left;clear:both;margin-right:5px}
[/B]div.achievetop2 {
    background:#EEE;
    font-size:18px;
    height:30px;
    margin-top:4px;
    padding:2px;
   [B] overflow:hidden;
[/B][B]zoom:1.0;[/B]
}
div.achievebottom2 {
    background:#EEE;
    color:#000;
[B]    /*height:26px;*/
[/B]    margin-top:0;
    padding:2px 2px 2px 10px;
    [B]overflow:hidden;[/B]
[B]zoom:1.0;[/B]
}
div.achievement2 {
    color:#000;
   [B] /*float:left;*/
[/B]    font-weight:700;
    height:15px;
  [B] /* margin-left:5px;*/[/B]
    width:auto;
   [B] overflow:hidden;[/B]
[B]zoom:1.0;[/B]
}
div.achievedescrip2 {
    color:#000;
   [B] /*float:left;*/[/B]
    margin-left:5px;
    width:auto
}




[B]<div class="achieve">[/B]<img src="http://www.gameguidecentral.com/images/achieves/brink_youvesavedtheark.jpg" [B]class="imgleft"[/B] >
    <div class="achievetop2">
        <div class="achievement2">You&#8217;ve saved the Ark</div>
        <div class="gspoints2">75 / Bronze</div>
    </div>
    <div class="achievebottom2">
        <div class="achievedescrip2">Win all main longer text to make this wrap around to the next line missions of the Security campaign (not including What-If missions)</div>
    </div>
</div>

Of course that suffers badly from divitus and could be coded more simply as follows.


<div class="achieve2">
    <p class="imgleft"><img src="http://www.gameguidecentral.com/images/achieves/brink_youvesavedtheark.jpg"></p>
    <div class="achieve-inner">
        <h4><b>You&#8217;ve saved the Ark</b> <span>75 / Bronze</span></h4>
        <p>Win all main longer text to make this wrap around to the next line missions of the Security campaign (not including What-If missions)</p>
    </div>
</div>

With simplified CSS:


.achieve2{
    overflow:hidden;
    zoom:1.0;
    clear:both;
    background:#EEE;
    margin:0 0 4px;
}
.achieve2 p.imgleft{
    float:left;
    clear:both;
    margin:0 5px 0 0;
}
.achieve-inner{
    overflow:hidden;
    zoom:1.0;
}
.achieve2 h4 {
    font-size:18px;
    margin:4px 0 10px;
    padding:2px;
    overflow:hidden;
    zoom:1.0;
}
.achieve2 h4 b{float:left}
.achieve2 h4 span{
    float:right;
    padding:0 5px 0 0;
}
.achieve2 p{
    color:#000;
    margin:0;
}
3

Thank you very much!

The changes to the original works great.

I did try your simplified version but it comes up with everything on it’s own line, not in a container like I had it and no background color.

Looking over the differences to see if I can figure it out.

Charles

4

Probably a typo in the class name somewhere. I had both versions working in your page which I copied locally so barring any unforeseen errors it should work :slight_smile:

5

Yep. My fault. Not typo but I just started using a CDN so I didn’t purge the .css from the CDN.

6