I_need_some_help._CSS_&_DIV_Questions

im...LOST

Ok, just to clear some things up. I've only been doing CSS for about 2 weeks now and my HTML isn't the greatest either but I'd really appreciate your help.

Ok, so I have a wrapper which repeats a background. This is a Div.

Then I have the content in another div.

Inside this div there is a list of 5 divs like this:

<div id="content_container"  >
              <div id="cartman"></div>
			  <div id="jd"></div>
			  <div id="joey"></div>
			  <div id="stewie"></div>
			  <div id="bart"></div>
              </div>
</div>

In each of these Divs is a 100px by 100px image assigned to them by CSS.

I'll bung in the code now so ye can have a look see.

#content_container {
position:relative;
top: 10px;
left: 20px;

}

#cartman {
background-image:url(images/progs/cont.html);
width:100px;
height:100px;
position:relative;
top: 200px;
left: 300px;
}

#jd {
background-image:url(images/progs/jd.gif);
width:100px;
height:100px;
position:relative;
left:70px;
top:90px;
}

#stewie {
background-image:url(images/progs/stewie.gif);
width:100px;
height:100px;
position:relative;
left: px;
top:-150px;
}

#joey {
background-image:url(images/progs/joey.gif);
width:100px;
height:100px;
position:relative;
left: 180px;
top:-50px;

}

#bart {
background-image:url(images/progs/bart.gif);
width:100px;
height:100px;
position:relative;
left: 400px;
top:-250px;
}

Ignoring the stupid positioning of the icons. (I was just messing around with numbers to see what happens.) no matter what I do I seem to always have loads of unwanted empty space at the bottom of my Div that pushes my footer down and makes it look funny.

Eg.



Any advice on how to position the images *something* like this;







GRR. WHAT SAID ABOVE CONDESED

I list some divs. They list vertically automatically. Is there any way to list them horizontally so I can position them from there.

I guess the above would work.

Cheers and sorry for te very messy post.

Teh Russ

DIVs are set to display as "block" by default... try adding this to each DIV class:

display: inline;

... that should display them in a row as opposed to one under the other.

im...LOST

Thanks. So what you are saying is, to have the code like this;

#content_container {
position:relative;
top: 10px;
left: 20px;


}

#cartman {
background-image:url(images/progs/cont.html);
width:100px;
height:100px;
display:inline;


}

#jd {
background-image:url(images/progs/jd.gif);
width:100px;
height:100px;
display:inline;

}

#stewie {
background-image:url(images/progs/stewie.gif);
width:100px;
height:100px;
top:20px;
display:inline;
}

#joey {
background-image:url(images/progs/joey.gif);
width:100px;
height:100px;
display:inline;

}

#bart {
background-image:url(images/progs/bart.gif);
width:100px;
height:100px;
display:inline;

}

It's just that the code I put in above causes all of the images to dissappear.

Thanks again btw. I stumped at how to do this.

Goodshape

im...LOST wrote: »

	<div id="content_container"  >
		<div class="faceIcon" id="cartman"></div>
		<div class="faceIcon" id="jd"></div>
		<div class="faceIcon" id="joey"></div>
		<div class="faceIcon newLine" id="stewie"></div>
		<div class="faceIcon" id="bart"></div>
	</div>

#content_container {
	position:relative;
	top: 10px;
	left: 20px;
	overflow : auto;
}

.faceIcon {
	float : left;
	width : 100px;
	height : 100px;
	margin-right : 130px;
}

.newLine {
	clear : left;
	margin-left : 130px;
}

#cartman {
	background-image:url(images/progs/cont.html);
}

#jd {
	background-image:url(images/progs/jd.gif);
}

#stewie {
	background-image:url(images/progs/stewie.gif);
}

#joey {
	background-image:url(images/progs/joey.gif);
}

#bart {
	background-image:url(images/progs/bart.gif);
}

Haven't tested.. but give that a shot. Might work.

im...LOST

With some tinkering I got it done.

Thanks lads!