Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Margin not working

    i wanted text to be 10 px from the left img
    preview
    http://jsfiddle.net/DKZ6a/embedded/result/

    <div class="image">
    <img src="https://dl.dropboxusercontent.com/u/28490184/testing%20hmtl/image.png">
    <p>
    A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float. [...] When a box is
    taken out of normal flow, all content that is still within normal flow will ignore it completely and not make space for it
    </p>
    </div>





    .image{background-color:red;height:200px;width:500px;}
    .image p{padding-top:10px;}
    .image img{float:left;clear:both;padding:10px 0 0 10px;;}
    Last edited by h123er2; 04-20-2013 at 09:40 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    Your class is called "image" not "images"
    Code:
    .image{background-color:red;height:200px;width:500px;}
    .images p{margin-top:50px;margin-left:10px;}
    .image img{float:left;padding-top:10px;margin-left:10px;}
    Dave

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    Your class is called "image" not "images"
    Code:
    .image{background-color:red;height:200px;width:500px;}
    .images p{margin-top:50px;margin-left:10px;}
    .image img{float:left;padding-top:10px;margin-left:10px;}
    Dave
    still doesnt work..
    padding or margin left on p still doesnt work..

    .image{padding:0;margin:0;background-color:red;height:200px;width:500px;}
    .image p{padding-top:10px;}
    .image img{float:left;clear:both;padding:10px 0 0 10px;;}
    Last edited by h123er2; 04-20-2013 at 03:41 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    You may want to float your <p> left also. I'm not exactly sure why it works the way you're seeing it...

    Dave

    Um, I don't think that works either... let me look at this.

  • #5
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    By the way when I do this, I've always put a margin on the image, not on the <p> tag. That does work, I'm just not seeing why you couldn't do a margin on <p>...

    Dave

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    I'm probably not describing this too well, but here's the scenario. Your image is floated to the left, which does push it to the left side of the div. It does not rearrange the default left and right positioning of the following <p> tag though. It's left side is the inside of that containing "image" div. Float just tells the following items to "flow around me", so the text is flowed as necessary to avoid the image. The left margin you're adding is starting at the <div>, so if you make it really big (like 200px) you'll see that it now has pushed the text to the right of the div like you were expecting.

    Hope that helps...

    Dave

  • Users who have thanked tracknut for this post:

    h123er2 (04-20-2013)

  • #7
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    .image{background-color:red;height:200px;width:500px;}
    .image p{padding-top:10px;float:left;margin-left:10px;}
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 276 Times in 275 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    .image{background-color:red;height:200px;width:500px;}
    .image p{padding-top:10px;float:left;margin-left:10px;}
    That's what I originally thought too

  • #9
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    well if that does not do it then it is a screwy page and has some junk on it that is probably non-standard and turning the DOM into a gelatinous tag soup.

    @h123er2,

    Post a link to the page. It is obvious that you have more messed up than the few lines of code you posted.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #10
    New Coder
    Join Date
    Mar 2013
    Posts
    80
    Thanks
    45
    Thanked 0 Times in 0 Posts
    guys, posted the preview

  • #11
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    When you get around to trying the code I posted, post a link to the result I will be back, but I am not going to waste my time playing a game of peek-a-boo.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •