Help with floating...

spl1nter · 09-12-2004, 06:49 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 src='thumb_gen.php?forum.jpg' alt='The new look forum.' />
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?

Jazzee · 09-12-2004, 08:20 AM

Looks like you figured this out?

spl1nter · 09-12-2004, 09:16 AM

I sort of solved it:

Code:

<div class="top">

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

<div class="context">
<p>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>
<a href='image/forum.jpg'><img src='thumb_gen.php?forum.jpg' alt='The new look forum.' /></a>
</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;
}

Unfortunately the text goes above the image now. The top of the image is meant to be on the same line as the 1st line of text.

spl1nter · 09-12-2004, 11:07 AM

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">
<p><a href='image/forum.jpg'><img src='thumb_gen.php?forum.jpg' alt='The new look forum.' /></a>
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;
}