www.webdeveloper.com
Results 1 to 12 of 12

Thread: Problems with margins on div's and images

Threaded View

  1. #1
    Join Date
    Apr 2005
    Posts
    491

    Problems with margins on div's and images

    I want zero space between div's and images
    I've tried everything, nothing works!
    I was hoping someone could point out where I was going wrong

    I have this code:

    Code:
    	<div style="width:100&#37;;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/london-bridge.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    		<div style="clear: both;"></div>
    	  <div style="width:40%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/1.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    	  <div style="width:60%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="d.html"><img src="images/2.jpg" alt="Porsche Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    		<div style="clear: both;"></div>
    	  <div style="width:30%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="a.html"><img src="images/bmw.jpg" alt="BMW Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    	  <div style="width:70%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="b.html"><img src="images/bmw2.jpg" alt="BMW 2 Car" style="width:100%;position:relative;left:1px;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    This image shows what I get:

    http://i.imgur.com/U8JdS.jpg

    I should explain why I have done this way and why the image widths are set to be 100% width

    The code is for a mobile website and I need the images to stretch all way across the screen - regardless of device or orientation

    ONE MORE PROBLEM: the single image at the top goes all the way across - this is fine.
    BUT, below this, I have 2 images side by side - the right hand image ALWAYS sits 1 pixel away from the right edge!
    Grrrr!!!!
    This is why I have added: position:relative;left:1px;

    Where am I going wrong?

    Thanks


    OM
    Last edited by OM2; 04-28-2012 at 07:35 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles