www.webdeveloper.com
Results 1 to 3 of 3

Thread: div box positioning

  1. #1
    Join Date
    Jun 2012
    Posts
    1

    Angry div box positioning

    Hi there. Im having trouble with positioning a div box.

    I need to have both of them horizontally aligned NOT on top of each other.

    Please help! i cant find the solution anywhere.


    <html>
    <head>
    <title>home</title>
    <style type="text/css">
    #columns {
    width:500px;

    }

    #columns .column

    position:relative;
    width:50%;
    padding:10%;
    border:solid 1px #000;


    #columns .left {
    float: left;
    }

    #columns .right{
    float: right;
    }
    </style>
    </head>


    <body>

    <div id="columns" style="display:block;">
    <div class="left column" style="background-color:#336699; padding:25px;">
    <p> Quando uma família chega na Inglaterra, geralmente esta a procura de uma vida melhor ou talvez, para estudar inglês.
    As razoes são varias. O começo em uma nova terra e dificil.
    Sem familiares, nova cultura, nova língua, e muitas vezes sem informações praticas para o dia a dia.

    Nosso objetivo e ajudar Comunidade de Expressão Portuguesa em Swindon. Com suporte social, saúde, educação vocacional,
    leis imigratórias e outras informações praticas.</p></div><br />



    <div class="right column" style="background-color:#336699; padding:25px;">E uma comunidade organizacional
    sem fins lucrativos dependendo exclusivamente de voluntários.
    Todos os profissionais são pessoas que desejam ajudar.
    Alguns irão dedicar poucos minutos, outros horas, existira também aqueles que irão doar dias ou semanas.

    Agora se você precisa de informações de advogados, médicos, contadores e etc, acesse </p></div><br /><br /><br />

    </div>






    <a href="homeen.html">English/Inglês</a>



    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,144
    Reduce the width setting for #columns .column to 48&#37; or 49%. When you added a border to the .column <div>s, the space for them is added to the 'width', so the actual horizontal space (width) they occupy is 50% + 2px. The result is that two such <div>s won't fit horizontally in the window: (50% + 2px) * 2 = 100% + 4px
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2012
    Posts
    10
    you probably will need to add the property:
    display: inline;

    into your css.

    I use this site as a reference every time i need to work with position divs,

    http://www.quirksmode.org/css/display.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles