Help with floating...

splinter · #1 (**permalink**) 09-12-2004, 10:05 AM

On my site http://www.gamehideout.co.uk/ I am trying to get the image in the same box as "Testing, testing." while being on the right-hand side of the box (where it currently is).

Code:

<div class="context">
[img]thumb_gen.php?forum.jpg[/img]
Testing, testing. 
</div>

Code:

#content .top .context img {
border: 1px #CCCCCC dashed;
padding: 1px;
float: right;
}

What's up and how do I fix it?

splinter · #2 (**permalink**) 09-12-2004, 12:57 PM

It's ok. I sort of solved it:

Code:

<div class="top">

<div class="header">latest update - 12/09/04</div>

<div class="context">


This site is very incomplete but all the links work so you can take a look around. Not much content yet though.
Make sure to check out the forum as it has become very popular!</p>
[img]thumb_gen.php?forum.jpg[/img]
</div>

</div>

Code:

#content .top .context {
border: 1px #CCCCCC dashed;
border-top: 0px;
padding: 3px;
text-align:right;
}
#content .top .context img {
border: 1px #CCCCCC dashed;
padding: 1px;
margin: 3px;
}
#content .top .context p {
text-align: left;
float: left;
margin: 0px;
}

This will work until the text goes past the image.

Basically what I've done is instead of the box getting it's height from the text it is getting it from the image. If the text goes beyond the image though, the text will overflow.

splinter · #3 (**permalink**) 09-12-2004, 12:58 PM

Actually. I lie.

The problem I now face is the image goes beneath the text. I can't put float: right; in the image class as that brings me to the original problem.

:(

splinter · #4 (**permalink**) 09-12-2004, 02:30 PM

I figured it out. I'm not going to be able to tell you exactly how I did it as I made lots of little changes and I've forgotten how much different the code is.

I'll provide the two pieces of code now though for you to analyse. The main bit was to have the image tag before the text.

Code:

<div class="context">


[img]thumb_gen.php?forum.jpg[/img]
This site is very incomplete but all the links work so you can take a look around. Not much content yet though.
Make sure to check out the forum as it has become very popular!</p>
</div>

Code:

#content .top .context {
border: 1px #CCCCCC dashed;
border-top: 0px;
padding: 3px;
float: left;
margin-bottom: 5px;
}
#content .top .context img {
border: 1px #CCCCCC dashed;
padding: 1px;
margin: 3px;
float: right;
}
#content .top .context p {
margin: 0px;
}