I have recently started a forum at phpBB and am currently tweaking the styles to get it how I want it to look. One thing I did was move a little box called .postprofile (the user profile) from the right over to the left and .postbody (where the message is placed) from the left over to the right.

 

Now, whenever I resize the window horizontally, things go a bit odd. The right float seems to overlap the left and push it down. I have made a couple of screenshots to try and better illustrate what I mean.

 

Window full size

 

Window resized horizontally

 

These are the styles from the stylesheet:

 

.postprofile {

margin: 5px 0 10px 0;

padding-right: 15px;

min-height: 80px;

color: #666666;

border-right: 1px solid #FFFFFF;

width: 16%;

float: left;

display: inline;

}

 

.postbody {

padding: 0;

line-height: 1.48em;

color: #333333;

width: 82%;

float: right;

}

 

How can I stop .postbody invading .postprofile's territory?! I just want the floats to work like they do on this board here. If I resize this window horizontally, nothing is pushed out of the way and it looks fine at all sizes. Please help!

 

Ian

I assume that the markup has .postbody coded first, so it uses the space first on the right and if the width isn't enough for .postprofile plus its 15px padding-right to fit beside it on the left, .postprofile will drop down.

 

You have padding-right: 15px in .postprofile which makes it impossible to judge the total width when mixed with % widths of 82% and 16% because in a small window width of 500px 98% is 490px plus 15px is 505px which exceeds the 500px (which means .postprofile doesn't have enough space) so I would make the padding-right: 2%;