hi i am new to CSS and have only learnt a little bit as i have gone along, i am writing a template for a client and they want a DIV Tag with a color for a background and i need to nest 2 div tags inside this for the content.

 

 

 

 

<div id="content-placeholder">

<div id="middlecontent"> <div id="development">

<div id="devtext">Benefit from one of the most diverse and expert technical teams

available. This places us as one of the best sources for

outsourced IT services.<br />

Our senior qualified engineers work to ensure we always have

the right people on standby, so whatever your IT problem may

consist of, we have the correct solution.

<br />

IT Support requires knowledge, knowledge comes from being at

the forefront of technology and staying one step ahead. We are

constantly updating our knowledge and skillsets. Allowing us to

manage a major support network without having to be onsite

when a problem occurs <br />

<br />

<a href="http://www.t400.com/onsite-support"> Click here to book a consultant or call out</a></div><div id="devtitle">IT Support</div>

<div id="devimage"><img src="images/Callcentre.jpg" width="98" height="151" alt="IT Support"/></div>

</div></div>

 

<div id="leftcontent"><img src="images/temp-image.jpg" width="400" height="371" /></div>

 

</div>

 

#content-placeholder {

background-color:#dde8ee;

 

}

 

#leftcontent {

margin-left:16px;

background-color:#FFF;

width:400px;

padding-left:7px;

padding-right:7px;

 

}

 

#middlecontent{

float:left;

background-color:#FFF;

width:auto;

margin-left:440px;

}

 

#development {padding-top:7px;padding-left:5px;}

 

#devtitle {

 

color:#46b1e7;

font-size:20px;

font-weight:bold;

width:120px;

}

 

#devimage {width:120px;}

 

#devtext {

float:right;

width:auto;

font-size:12px;

margin-left:130px;

}

 

#advert-scroller{

float:right;

width:190px;

margin-right:10px;

}

 

 

the way it displays on the page is that leftcontent is on the left hand side, middlecontent is on the right hand side and leftcontent has the content inside it below the content for the middlecontent div tag.

 

how do i fix this so that each of the div tags content sits at the top of the div tag, and not one at the top and one at the bottom....?

PLEASE HELP ME THIS IS DOING MY HEAD IN THE REST OF THE TEMPLATE HAS GONE TOGETHER PERFECT!!!!!!!!

use absolute positioning

 

posotion:absolute;
left:1px;
right:1px;
top:1px;
bottom:1px;

 

change each one till you get the item where you want it

i have tried this but the div tag then becomes a floating layer on top of the other div tags... and i need it to be able to stretch depending on what screen size the user has....

Something like this help? It's an easy way to do it...

 

HTML

 

<div id="container">

<div id="inner1"></div>
<div id="inner2"></div>

</div>

 

CSS

 

#container {
width:100%;
height:auto;
background:#000000;
}

#inner1 {
float:left;
height:200px;
width:45%;
}

#inner2 {
float:left;
height:200px;
width:45%;
}

 

It will float two divs inside another div which has a black background. Each of the inner divs takes up 45% of the container...

 

As you are floating elements, you will also have to have something to clear them unless you specify a height to the container...if you don't specify a height ('auto' doesn't count), add:

 

HTML

 

<div class="clear"></div>

 

before closing the container div.

 

and then CSS

 

.clear {width:100%; height:1px; clear:both;}

 

This will make the container expand in relation to your inner div sizes.

ooo thanks mike, i will try that tomorrow and get back to you, CSS is brilliant, but im very new so thanks for the help....

mike, thanks ever so much for your help, all i need to do now is put the container in so the background of the other area is white, that worked a treat..... thanks again!

No problem!