trying to float css (need help)

croche

Member
hi im codeing my first site but im having a bit of truble floating a image one way and the text the other way...

iv got the html sorted now i on to the css but i can seem to get the featured image to float right and the text to float left


http://www.media36.com/test/

here is what i want it like

http://media36.com/img/blue_dream.png

also how do i get the header background and the featured backgroung on i havng tryed yet but im not sure how to do it anyway

thanks
Chris
 
yeah, i found that too, but i thought it was probably just my tinterweb connection.
 
Hay buddy the img directory needs to be removed from the link.
What I would do is group the text section with a div.
You currently have this ~
<div id="featured">
<img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" class="featuredImage" />

<img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
lobortis non, lacus. Read More
</p>

I would change that to ~
<div id="featured">
<img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" class="featuredImage" />
<div>
<img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
lobortis non, lacus. Read More
</p>
</div>

Then float the images right.
#featured img{float:right}

Then counter it for the div.
#featured div img{float:none}

Set a width on the div and it should move up to the left.
#featured div{width:300px}

Let me know if you are still having issues.

Jaz

Key:
Purple ~ XHTML
Green ~ CSS
 
You need to float the image right, then wrap the "Featured Text" img, p, h3, p in a div and give it an iD then float that left.

So.... HTML

<div id="featured-left">
<img src="http://www.designforums.co.uk/images/featuredtext.png" alt="Blue Dream" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas at nisi. Sed ligula diam, laoreet vehicula, egestas ut,
lobortis non, lacus. Read More
</p>
<h3>Services Provided</h3>
<p id="details">Design, XHTML/CSS</p>
</div>

<img src="http://www.designforums.co.uk/images/featuredimg.png" alt="Featured" id="featuredImage" />


CSS

#featured-left {
float:left;
width:XX; you need to put the wdith of the area here
}
#featuredImage {
float:right;
width:XX; width of your image here
}

Edit: Jaz beat me too it :)
 
Thats a good solution thier 61 pixels, maybe you should type faster next time hay, lol.

I even colour coded mine, lol.
 
No worries, glad I could help.
Well if I didn't 61pixels would have sloved it, but anyway no worries. :)
 
Yeah they would they are both the same solution TBH, great minds and all that. :)
Mine uses less ids so has less bloat, but apart from that not much in it.
 
I find that styling your font early on enhances the coding process. I don't know why, maybe it's just me but it might have something to do with measurement or some sort of visual/psychological deceit. :p
 
Back
Top