homepage Welcome to WebmasterWorld Guest from 54.227.40.166
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Need help floating an image to the left of some text
I think the H3 is causing the problem
Clark




msg:3602281
 7:16 pm on Mar 16, 2008 (gmt 0)

I've tried this so many ways and can't get it to work on the major browsers...

I want to keep the H3 for "forum title" because that is semantically correct.

I also want to keep the P for "forum description" because that is also semantically correct.

For the rest, I don't mind changing out divs or any other element name...

Also note that this is in a template and gets repeated for each forum title.

I'm applying a background color to the outer div with a desired space between each forum title section so the page isn't one huge background color... that's why I have   at the end.

I hope someone can come up with some css that will get the image to float to the left of all three lines of text....


<div class="forumdetail">

<h3><a href="#">$forumtitle</a> <small class="forumpostcount">(x posts)</small></h3>

<p class="forumdesc">$forumdescription <span class="sponsorforum">Sponsored by <a href="#">$sponsor</a></span></p>

<p class="forumattach"><img src="attachment.php" alt="thumbnail" width="50" height="50"></p>
</div>
&nbsp;

 

DrDoc




msg:3602320
 8:55 pm on Mar 16, 2008 (gmt 0)

Just move the image up in the code :)

Clark




msg:3602549
 4:04 am on Mar 17, 2008 (gmt 0)

Tried that too...

Let's see, I tried:
float:left
1. On the img, with the image above everything else and no surrounding div.
2. Surrounding the img with a p tag, which helped a bit.
3. Adding clear:both to various elements, which helped FF and hurt IE (or vice versa)
4. Putting the img underneath the div, just under the H2, at the bottom...etc..

At some point I almost got it working right, but it bled into the next set of the above code (as I said, it's a template that gets called once for each forum).

I will try to move it up again...but where did you mean? Right under the div? Where should the clear's be? And what type of clear? Left? Both?

Thanks.

fside




msg:3602691
 8:20 am on Mar 17, 2008 (gmt 0)

Are you just trying to mimic a table layout?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">

.forumdetail {
margin: 0px;
padding: 10px;
background: #ccf;
border-bottom: 3px solid #fff;
}

.forumdetail IMG {
float: left;
}

.forumdetail H3, .forumdetail P {
margin-left: 70px;
}

</style>
</head>
<body>

<div class="forumdetail">
<img src="image_on.gif" alt="thumbnail" width="50" height="50">

<h3>Some title</h3>

<p class="forumdesc">Some description</p>

<p class="forumattach">Some stuff</p>
</div>

<div class="forumdetail">
<img src="image_on.gif" alt="thumbnail" width="50" height="50">

<h3>Some title</h3>

<p class="forumdesc">Some description</p>

<p class="forumattach">Some stuff</p>
</div>

<script>

</script>

</body>
</html>

Clark




msg:3603045
 4:36 pm on Mar 17, 2008 (gmt 0)

Thanks fside. I guess it's like a table layout but I don't mind if the last line goes below the image, it can slide under it like a proper float. I will try out your code.

Clark




msg:3603061
 4:49 pm on Mar 17, 2008 (gmt 0)

Very clever trick there! margin-left, doh! Thank you so much!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved