Exact positioning of elements inside DIV

Hey guys

I'm not a good coder so these things always stress me out. I made a DIV with a specific width and height.

I want to put some block of texts, images, maybe a image gallery inside the DIV.

I want to "slice up" the div into few segments where I can put my content. This is what I have in mind;

http://i47.tinypic.com/10hlf0o.jpg

Any ideas how to do it? If it's not too much work, maybe someone can give me some example?

I want to learn how to do this, I know it's basic but I just need a good example how to work around this and I think I'll get the hang of it.

Thanks

 

But the width of the inner div makes the padding in different sizes for top/bottom and left/right which is not very good.

<style type="text/css">
	#outer{
		width:1000px;
		height:500px;
	}
	
	#outer:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	#left{
		width:400px;
		height:460px;
		float:left;
	}
	
	#leftTop{
		width:400px;
		height:50px;
		padding-bottom:10px;
	}
	
	#leftBottom{
		width:400px;
		height:400px;
	}
	
	#right{
		width:400px;
		height:450px;
		float:right;
		padding-top:20px 70px 20px 0px;
	}
</style>

HTML:

<div id="outer">
	<div id="left">
    	<div id="leftTop"></div>
        <div id="leftBottom"></div>
    </div>
    <div id="right">
    	
    </div>
</div>

HTML:

Hope this helps

BR,
Sampath

 

Hi Lermy,
Have you heard about "960 Grid System" or "Blueprint CSS"? They are both CSS frameworks that make easier those dirty jobs. I've recently been working with them and I love it !

 

I use blueprint, it's as simple as putting class="span-#" (# = 1 through 24 columns) on a div class or any block element... plus it handles text and css for print.

 

Lermy,

Did Sampath's example work for you? If not, let me know and I can try to assist you.