How to position DIV under other DIV

C

claudia

I've a page with 3 div with title images .... under each title area I
need to create an area (content area) for insert text... each area is
under the above title DIV


title areas:

bar_s (516px) - bar_e(229px) - bar_n (229px)

and under 3 box for contents


My problem is that I can't position the 3 box under each "title area"


HTML code

<div id="bar">
<div id="bar_s"><div id="bar_e"><div id="bar_n">
</div>

<div id="content">
<div id="content_s">sdsad</div>
<div id="content_e">asdas</div>
<div id="content_n">3333</div>
</div>




CSS code:

#main
{
width: 980px;
height: 100%;
}

#bar_s
{
margin-top: 8px;
height: 60px;
background: url(images/bar_s.png) no-repeat;
}

#bar_e
{
margin-left: 518px;
margin-top: 8px;
height: 58px;
background: url(images/bar_e.png) no-repeat;
}

#bar_n
{
margin-left: 231px;
margin-top: 8px;
height: 58px;
background: url(images/bar_e.png) no-repeat;
}


#content_s
{
width: 518px;
margin-top: 8px;
height: 360px;
background: #000044;
}

#content_e
{
width: 231px;
margin-top: 8px;
height: 360px;
background: #000999;
}

#content_n
{
width: 231px;
margin-top: 8px;
height: 360px;
background: #006666;
}



Io vorrei solo le 3 barre (immagini) con i titoli allineate orizzontalmente

e sotto le 3 aree di testo in cui posso inserire i miei contenuti
(incolonnati con i rispettivi titoli superiori)



Cosa sbaglio??


Grazie
 
C

claudia

Greeeeeeat!!! Now it's OK!!

Can you confirm me that my structure is right??

(another problem: I've added 3 div area in the footer, this are all with
the same dimensions, but I show them on 2 lines ... not in the same line)


HTML


<div id="wrap" align="center">
<div id="main">


<div class="content">
<div class="bar" id="BarServizi">
</div>
sdsad
</div>


<div class="content">
<div class="bar" id="BarEvidenza">
</div>
asdas
</div>


<div class="content">
<div class="bar" id="BarNews">
</div>
3333
</div>

<div class="footer">
<div class="bar" id="FooterBar1"></div>
</div>


<div class="footer">
<div class="bar" id="FooterBar2"></div>
</div>


<div class="footer">
<div class="bar" id="FooterBar3"></div>
</div>

</div>

</div>





CSS


body
{
margin:0;
padding:0;
background:#3d6279 url(images/background.png) repeat-x center ;
height:900px
}


#main
{
width: 980px;
height: 100%;
}


#bar
{
margin-left: 0px;
width: 980px;
}


div.content
{
float: left;
}

div.content div.bar
{
height: 60px;
}


div.footer
{
width: 33%;
float: left;
}

div.footer div.bar
{
height: 70px;
}




#BarServizi
{
width: 518px;
margin-top: 8px;
height: 60px;
background: url(images/bar_servizi.png) no-repeat;
}

#BarEvidenza
{
width: 231px;
margin-top: 8px;
height: 58px;
background: url(images/bar_evidenza.png) no-repeat;
}

#BarNews
{
width: 231px;
margin-top: 8px;
height: 58px;
background: url(images/bar_evidenza.png) no-repeat;
}



#FooterBar1
{
width: 334px;
margin-top: 8px;
height: 70px;
background: url(images/bar_down.png) no-repeat;
}

#FooterBar2
{
width: 334px;
margin-top: 8px;
height: 70px;
background: url(images/bar_down.png) no-repeat;
}


#FooterBar3
{
width: 334px;
margin-top: 8px;
height: 70px;
background: url(images/bar_down.png) no-repeat;
}
 
C

claudia

Thanks!!!

I've resolved with the same height


but I don't know the reason :-((
The BarServizi div is 2px taller than the others in that row. Those 2px
are sticking out and the first footer div is catching on them as it
tries to float left. You can solve the problem by making them all the
same height, or by setting clear: left on the first footer div, which
will make it move down 2px and get it all the way over to the left.


my BarServizi was +2px height

.... and my 3 footer div??
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top