Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to position DIV under other DIV

Reply
Thread Tools

How to position DIV under other DIV

 
 
claudia
Guest
Posts: n/a
 
      02-27-2010
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
 
Reply With Quote
 
 
 
 
claudia
Guest
Posts: n/a
 
      02-27-2010
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;
}
 
Reply With Quote
 
 
 
 
claudia
Guest
Posts: n/a
 
      02-28-2010
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??
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
<div class="position"> and <div class" section"> Luigi Donatello Asero HTML 31 05-07-2006 02:52 AM
Re: <div class="position"> and <div class" section"> Luigi Donatello Asero HTML 0 05-06-2006 01:55 PM
How to set position of a web control depending on other control's position at run-time? James Wong ASP .Net Web Controls 4 07-14-2004 10:24 AM
CSS: How to position a DIV below a floating DIV? Tamlyn Rhodes HTML 3 02-26-2004 10:33 PM



Advertisments