Image Float CSS tag

Discussion in 'HTML & Website Design' started by dl77002, Jan 31, 2007.

0
  1. #1
    For whatever reason, I cannot get the image on this page to float to the right:
    bonaweiss.atspace.com/help/float.html

    No matter what I've tried, the image sticks to the left side. I have no clue what I'm doing wrong, any ideas?

    Thanks in advance.
     
    dl77002, Jan 31, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    do you want the whole thing (image+box and text) to go to the right of the whole screen...

    or just the image to go to the right hand side of the box?

    if its the latter.... maybe just try a text-align:right; in your css?
     
    unitedrokz, Jan 31, 2007 IP
  3. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #3
    Try the code below:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title>



<style type="text/css">

html {
overflow-y: scroll;
}

.somediv {
width:530px;
margin:-20px 0 0px 0px; 
clear:both;
border:1px solid gray
}

.somediv .floatbox {
float:left;
width:185px;
margin:2px 0 0px 2px; 
display: inline;
}

.somediv p {
margin-top:0;
margin:0px 0px 0px 325px;
font-size:10px;
}

h1 {
font-family:Sans-serif;
font-size:12px;
color:#fcc;
margin-top:0px;
margin-bottom:0px
}

h2 {
font-family:Sans-serif;
font-size:12px;
color:#fff;
text-align: left;
margin-top:-10px;
margin-bottom:-15px
}

h3 {
font-family:Sans-serif;
font-size:12px;
color:#fff;
text-align: right;
margin-top:0px;
margin-bottom:0px
}

h4 {
font-family:Sans-serif;
font-size:12px;
color:#fcc;
text-align: right;
margin-top:-14px;
margin-bottom:0px
}
img.floatRightClear { 
    float: right; 
    clear: right; 
    margin: 4px; 
}

.floatLeftClear { 
    float: right; 
    clear: left; 
    margin: 4px; 
}

A { text-decoration:underline;
font-family:Sans-serif;
font-size:12px;
color:#fff;
text-align: center;
margin-top:0px;
margin-bottom:0px 
}

body {scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#000000;
scrollbar-track-color:#876969;      
scrollbar-darkshadow-color:#FFC0CB;
scrollbar-face-color:#FFC0CB;
scrollbar-highlight-color:#FAEBD7;
scrollbar-shadow-color:#000000}

</style></head><body bgproperties="fixed" background="float_files/backgroundnews.htm"> 


 

<div class="somediv">

<h1>Fruits</h1><h4>September 1, 2006  1:34am</h4>
<h2>Fruits is now available under FILM.</h2><img src="float_files/fruits_frame1.jpg" class="floatRightClear">
<br clear="all" /><br />

</div>
</body></html>
    Code (markup):
     
    Clive, Jan 31, 2007 IP
  4. Kalyse

    Kalyse Peon

    Messages:
    1,221
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You should also google for:

    float css tutorial


    I do that EVERY time, even now I know how to use it because the tmeplates it offers are just so quick.

    I can copoy and paste it really quickly.

    Its the top link
     
    Kalyse, Jan 31, 2007 IP
  5. dl77002

    dl77002 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks for the help everyone. The problem was (as I see that CliveRay noticed) that I didn't close my h4 tag, canceling out all of the CSS below it. Dumb mistake I know, but I'm new to this.

    I have one more problem with floating, I'm wondering how to make this page:
    bonaweiss.atspace.com/help/newssetup.html

    Look like this:
    bonaweiss.atspace.com/help/44.html
     
    dl77002, Feb 1, 2007 IP
  6. AaronM

    AaronM Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    you have to put a display:block on the image for floats to apply to it.
     
    AaronM, Feb 1, 2007 IP
  7. dl77002

    dl77002 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    My images are floating, I just wonder how to code it so that it does what it's doing in the second link.
     
    dl77002, Feb 1, 2007 IP
  8. AaronM

    AaronM Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Sorry, i was replying to your original question at the same time that you were posting that you got it.

    for your 2nd question,
    1) you have 2 body tags. Remove the one right below <title>. also, you should not put your background in the body tag, it should go in your styles.

    2) apply the background image to .somediv in your css.
     
    AaronM, Feb 1, 2007 IP
  9. Ginger Ninja

    Ginger Ninja Guest

    Messages:
    161
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Apply the background image to body in your stylesheet.
     
    Ginger Ninja, Feb 1, 2007 IP
  10. dl77002

    dl77002 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Done. Does this apply to how it looks in the second link though? It seems as if I would need to put a new css code in there to make it do so.
     
    dl77002, Feb 1, 2007 IP