How to position DIV under other DIV

Discussion in 'HTML' started by claudia, Feb 27, 2010.

  1. claudia

    claudia Guest

    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
    claudia, Feb 27, 2010
    #1
    1. Advertising

  2. claudia

    claudia Guest

    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;
    }
    claudia, Feb 27, 2010
    #2
    1. Advertising

  3. claudia

    claudia Guest

    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??
    claudia, Feb 28, 2010
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    973
    Andy Dingley
    Feb 26, 2004
  2. Luigi Donatello Asero

    <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    31
    Views:
    1,196
    Toby Inkster
    May 7, 2006
  3. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    0
    Views:
    402
    Luigi Donatello Asero
    May 6, 2006
  4. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    1
    Views:
    423
    Luigi Donatello Asero
    May 6, 2006
  5. James Wong
    Replies:
    4
    Views:
    496
    James Wong
    Jul 14, 2004
Loading...

Share This Page