...

View Full Version : Container Div Ends when <img> is inserted



srule_
07-18-2007, 08:35 PM
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


<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:


#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;

}

Jutlander
07-18-2007, 09:19 PM
.clear {
clear: both;
}


Then add this after you last gallery class. That's how I usually do it.


<br class="clear">

srule_
07-18-2007, 10:06 PM
nope, did not work with that :(

_Aerospace_Eng_
07-18-2007, 11:17 PM
You need to clear your floats. http://www.positioniseverything.net/easyclearing.html

srule_
07-19-2007, 07:49 AM
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

_Aerospace_Eng_
07-19-2007, 07:55 AM
Take a look at the CSS you have here

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.

DMWhiteDragon
07-19-2007, 07:55 AM
http://www.shadowdevelopment.com/site_pic.jpg

Thats in IE7

Might wanna check that out aswell ;)

Jutlander
07-19-2007, 01:16 PM
nope, did not work with that :(

It worked here. Oh well good you sorted it out.

srule_
07-19-2007, 04:52 PM
thanks all who helped!

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum