How to get a block like this using DIV ?

Discussion in 'CSS' started by poseidon, Apr 22, 2008.

0
  1. #1
    I am trying to get a block in the center left a page using div. I have used float:left but that brings it at the top left but I want it somewhat lower..say 250px. How can I do it ?

    Cheers
     

    Attached Files:

    poseidon, Apr 22, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    margin-top: 250px;
     
    wd_2k6, Apr 22, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hit it on the head. If there's nothing else above it, though, then sometimes it's better to use padding-top on the container instead. Same difference, though.
     
    Stomme poes, Apr 22, 2008 IP
  4. poseidon

    poseidon Banned

    Messages:
    4,356
    Likes Received:
    246
    Best Answers:
    0
    Trophy Points:
    0
    #4
    there is a adsense 250x250 block with {float:left} and I think that's why its not working since 2 things are floating. The page is this, just in case u might want to look at. I am trying to get the image on left, below adsense and the yellow block at the top right.

    Things are totally messed up on that page :)
     
    poseidon, Apr 22, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi, OK so if i understood right you want the image of the kidney stages directly underneath the Adsense ad?
    There are many ways to do this, directly before the image you could add:
    <div style="clear:both"></div>

    However to avoid the unnessecary div what I would go with is changing the Image to this:

    <img src="http://www.medsavailable.com/files/kidney_cancer_program_2_0.jpg" alt="kidney_cancer_program_2.jpg" title="kidney_cancer_program_2.jpg" height="426" width="275" class="kidney">

    and then inside one of the many stylesheets you have linked to your site you would add this:

    .kidney { clear:both; }

    Then inside this you could add padding, borders or anything else to the image.
    Also make sure the yellow box appears before the image in the code.

    For your education what we are actually doing hear is clearing the floats, so that the content appears underneath it, it is a common error. Floats can easily be cleared with the clear: both; property in CSS. or even clear: right; and clear: left; if you only want to clear one specified float!
     
    wd_2k6, Apr 22, 2008 IP