• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

trying to float css (need help)


#1
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
 

Jazajay

Active Member
#7
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
 
#9
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 :)
 

Jazajay

Active Member
#14
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.
 

Kevin

Senior Member
#16
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