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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts

    How to prevent image pushing down?

    I am inserting images and i want these images to be side by side...but one pushed the other down or vice versa. How can i prevent images being pushed down so I can position them beside each other?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    <img> elements are style Block by default. use css to give the images display:inline or you can float them depending on your needs.

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    iv tried that still doesnt work..id appreciate if u can take a look at the coding for me thanx.

    HTML
    Code:
    <div> <img class="nani" src="Homepage/Nani.jpg" width="85" height="54"/> </div>
    		<div>	<img class="bpoints" src="Homepage/News.png" width="60" height="261"/> </div>
    These are the two images.

    CSS
    Code:
    img.nani{
    padding-top: 0px;
    padding-left: 14px;
    display:inline
    }
    
    img.bpoints{
    padding-top: 11px;
    padding-left: 290px;
    display: inline;
    }
    My CSS code for the two images.
    Last edited by shakoor6; 05-06-2011 at 07:57 PM.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by DanInMa View Post
    <img> elements are style Block by default. use css to give the images display:inline or you can float them depending on your needs.
    I believe images are 'display:inline' by default.
    But each image is contained within separate divs, which are 'display: block' by default:
    Code:
    <div> <img class="nani" src="Homepage/Nani.jpg" width="85" height="54"/> </div>
    		<div>	<img class="bpoints" src="Homepage/News.png" width="60" height="261"/> </div>
    Unless you have a specific reason not to do so, you could place the images within one div.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ouch, your right. thanks for the correction! ( bad help is worse than no help)


  •  

    Posting Permissions

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