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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts

    Container Div Ends when <img> is inserted

    Hey, Does anybody know why my pictures end the 'content' div even thoguh they are placed inside it?

    this is the site: http://template1.nrtdesigns.com/templates.php

    as you can see the white background from my content div stops as soon as i start pputting in the picture gallery.

    HTML
    Code:
    	    <div id="mainarea">	       
    		 <div class="content">
    	       
    		   <h1 class="page"> Templates </h1>	
    	       
    		   <h3 class="top"> Under Construction! </h3>
    	       <p class="top"> Thanks for  checking out Web Design Central! The site is currently in development but we will have some           excellent content for you in the near future. Be sure to check back soon! </p>
    		   
    		   
    		   <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
    		    <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
    		    <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
    		    <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
    		    <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
    		    <div class="gallery">
    		   <img src="images/you.gif" alt="This Could Be your Site!" width="100" height="100" />
    		   <p> Template 1. Cool Breeze </p> 
    		   </div>
    		   
      	     
    		   
             </div>
    	   </div>

    CSS:
    Code:
    #mainarea {
    width: 400px;
    float:left;
    margin: 5px 0px 5px 25px;
    background: #bcbcbc;
    border-left:1px solid #5f5f5f;
    border-right:1px solid #5f5f5f;
    }
    
    *html #mainarea {
    display:inline;
    }
    
    .content {
    margin: 10px 10px 10px 10px;
    background:#FFFFFF;
    border:1px solid #FFFFFF;
    clear:both;
    }
    
    h1.page {
    position:relative;
    background: #6AB90D url(images/textbg.gif) repeat-x top left;
    margin:0px;
    padding:5px;
    color:white;
    }
    
    h1.page img {
    position:absolute;
    top: 280px;
    left: -65px;
    }
    
    
    *html h1.page1 img {
    position:absolute;
    top: 280px;
    left: -103px;
    }
    
    .content h3.top {
    margin:1px 0px 0px 0px;
    border-top: 5px solid #F36607;
    }
    
    .content h3 {
    margin:1px 1px 0px 1px;
    padding:10px 5px 0px 30px;
    background:url(images/news_icon.gif) no-repeat 7px 3px;
    }
    
    .content p {
    margin:1px 10px 10px 10px;
    padding: 5px 0px 5px 0px;
    }
    
    p.top {
    border-top: 2px dotted #F36607;
    
    div.gallery {
    float:left;
    width:100px;
    margin: 15px 10px 5px 15px;
    display:inline
    
    }
    
    .gallery img {
    border:1px solid black;
    
    }
    
    .gallery p {
    color:black;
    text-align:center;
    
    }

  • #2
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Code:
    .clear {
    clear: both;
    }
    Then add this after you last gallery class. That's how I usually do it.

    Code:
    <br class="clear">
    .
    .

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    nope, did not work with that

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Thanks, That Article helped.

    However after my fix it i get a minor new problem. If u look at my page "home link" then go to "templates link" u will notice the width of the container gets smaller by about 2px on the right hand side.

    why does this happen? this is very mind boggoling for me as both pages have the same css. It must be somthing to do with the images.

    and:
    "vBulletin Message
    You must spread some Reputation around before giving it to _Aerospace_Eng_ again."

    damn thing lol

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Take a look at the CSS you have here
    Code:
    div.gallery {
    float:left;
    width:175px;
    margin: 10px 0px 15px 10px;
    display:inline;
    }
    
    .gallery img {
    border:1px solid black;
    margin-top:5px;
    }
    Your images are already 175px wide to begin with. Now you are trying to put a 1px border on them causing them to be 177px wide. You have a few options. Then you also have the margins on div.gallery. Simply put, there is not enough room.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Thats in IE7

    Might wanna check that out aswell

  • #8
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by srule_ View Post
    nope, did not work with that
    It worked here. Oh well good you sorted it out.
    .
    .

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    thanks all who helped!

    I vote for some company to have a monoploy on browsers. Would make web design much easier! haha


  •  

    Posting Permissions

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