+ Reply to Thread
Results 1 to 2 of 2

Thread: css problem

  1. #1
    Barn Loyal todd2006 is an unknown quantity at this point todd2006's Avatar
    Join Date
    Mar 2008
    Posts
    889
    Rep Power
    4

    css problem

    Hello,

    Here is my code


    I have a header image

    then I have a div. Which holds 6 images in a row.

    Currently I have 3 rows. the layout is good. the images are aligned properly the way I want.

    But my main problem is maindiv. In IE 7 the images overflow outside the div.

    I need all images to be shown inside the div.

    Can someone tell me what i am doing wrong.



    Code:
    <head>
    <title>Main Page</title>
    <style type="text/css">
    .maindiv
    {
    width:700px;
    position:relative;
    margin: 0px;
    
    }
    
    .img-with-text {
        text-align: center;
        width: 100;
    	float:left;
    	padding:19px 19px 10px 0px;
    	font-size:9px;
    font-weight:bold;
    }
    
    .img-with-text img {
        display: block;
        margin: 0 auto;
    }
    
    .leftdivtop1
    {
    float:left;
    width:100px;
    padding:19px 0px 10px 0px;
    text-align:center;
    font-size:9px;
    font-weight:bold;
    }
    
    </style>
    </head>
    <body>
    
    
    <div class="maindiv">
    
    <p><img src="images/mainheader.jpg"></p>
    
    
    
    <div class="img-with-text">
    	<a href="main.pdf" target="_blank"><img src="/images/main-100x125.jpg">Click here</a>
    	</div>
    
    
    
    	<div class="img-with-text">
    	<a href="one.pdf" target="_blank"><img src="/images/one.jpg"></a>
    <a href="one.pdf" target="_blank">one<br/>
    1878-1883</a>
    	</div>
    
    
    <div class="img-with-text">
    	<a href="two.pdf" target="_blank"><img src="/images/two.jpg">
    	two<br/>
    1883-1885</a>
    </div>
    
    
    <div class="img-with-text">
    	<a href="03.pdf" target="_blank"><img src="/images/03.jpg">
    	03<br/>
    1885-1887</a>
    </div>
    
    <div class="img-with-text">
    	<a href="04.pdf" target="_blank"><img src="/images/04.jpg">
    	04<br/>
    1887-1889</a>
    </div>
    
    <div class="leftdivtop1">
    	<a href="05.pdf" target="_blank"><img src="/images/05.jpg">
    	05<br/>
    1889-1891</a>
    </div>
    
    
    
    <br/>
    
    <div class="img-with-text">
    	<a href="06.pdf" target="_blank"><img src="/images/06.jpg">
    	06<br/>
    1891-1894</a>
    </div>
    
    <div class="img-with-text">
    	<a href="07.pdf" target="_blank"><img src="/images/07.jpg">
    	07<br/>
    1894-1896</a>
    </div>
    
    
    <div class="img-with-text">
    	<a href="08" target="_blank"><img src="/images/08.jpg">
    08<br/>
    1896-1898</a>
    </div>
    
    
    <div class="img-with-text">
    	<a href="09.pdf" target="_blank"><img src="/images/09.jpg">
    	09<br/>
    1898-1900</a>
    </div>
    
    <div class="img-with-text">
    	<a href="10.pdf" target="_blank"><img src="/images/10.jpg">
    	10<br/>
    1900-1903</a>
    </div>
    
    <div class="leftdivtop1">
    	<a href="11.pdf" target="_blank"><img src="/images/11.jpg">
    	11<br/>
    1903-1906</a>
    </div>
    
    
    
    <br/>
    
    <div class="img-with-text">
    	<a href="12.pdf" target="_blank"><img src="/images/12.jpg">
    	12<br/>
    1906-1909</a>
    </div>
    
    <div class="img-with-text">
    	<a href="13.pdf" target="_blank"><img src="/images/13.jpg">
    	13<br/>
    1909-1912</a>
    </div>
    
    
    </div>
    
    <div style="clear:both;"></div>
    
    
    
    </body>
    </html>
    

  2. #2
    Barn Newbie Rangerbob5 is on a distinguished road Rangerbob5's Avatar
    Join Date
    Nov 2009
    Posts
    40
    Rep Power
    3

    This normally happens when the width of the images are wider than what you have defined for your DIV, check to make sure that your images, along with any padding, borders or margins doesn't go wider than the main DIV

+ Reply to Thread

Bookmarks

Posting Permissions

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

SEO by vBSEO