Put two div within container div

Question

Turns out I put two div with text inside another container div but is not occupying the space of the div container if the container div is above and is as if it had size. I need help because I want to apply to the div container top and bottom margins and thus it is impossible.

<style type="text/css">
#contenedora-indice {
    width: 870px;
    height: 100%;
}
.columna-izquierda {
    width: 250px;
    float: left;
    height: 100%;
    display: block;
}

.columna-derecha {
    width: 250px;
    float: right;
    height: 100%;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
}

.titulo-categorias {
    font-size: 20px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-right: 0px;
    color: #000066;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

</style>
<div id="contenedora-indice">
<div class="columna-izquierda"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
<div class="columna-derecha"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
</div>

Can you provide a working jsFiddle demo along with the html? — Ijas Ameenudeen, Mar 02 '14 at 17:30

thesublimeobject · Accepted Answer · 2014-03-02T17:47:53.160

1

You just need to use a clearfix, since you've floated the elements inside of the container div:

#contenedora-indice:before,
#contenedora-indice:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

#contenedora-indice:after {
    clear: both;
}

edited Mar 02 '14 at 17:47

answered Mar 02 '14 at 17:35

thesublimeobject

1,393
1
17
22

Sorry to be a little awkward but could you explain this to last for more concisely? where I put that code? Thank you! – Julia Mar 02 '14 at 17:42
1

Since your main container is #contenedora-indice, you should apply the clearfix to that. I edited my answer to show that. This is a pretty well-known way to force a parent to self clear its children. This is a pretty good answer to what is actually happening: http://stackoverflow.com/questions/9543541/what-does-the-clearfix-class-do-in-css – thesublimeobject Mar 02 '14 at 17:47
Sorry but I do not understand, I'm running like an idiot Could you place it in my code for it to appear on? Could you show an example? thanks – Julia Mar 02 '14 at 17:54
1

Here is an example: http://codepen.io/thesublimeobject/pen/nHcbw. All I did was add the clearfix to the bottom of your css. – thesublimeobject Mar 02 '14 at 17:57

web-tiki · Answer 2 · 2014-03-02T18:03:01.823

As floated elements don't expand the height of their parents, You need to "clear the floats" by adding a div after the two floated divs inside the container and give it the clear:both; css decleration.

FIDDLE

Your code would then look like this :

<style type="text/css">
.clr{
    clera:both;
}
#contenedora-indice {
    width: 870px;
    height: 100%;
}
.columna-izquierda {
    width: 250px;
    float: left;
    height: 100%;
    display: block;
}

.columna-derecha {
    width: 250px;
    float: right;
    height: 100%;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
}

.titulo-categorias {
    font-size: 20px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-right: 0px;
    color: #000066;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}

</style>
<div id="contenedora-indice">
<div class="columna-izquierda"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
<div class="columna-derecha"><span class="titulo-categorias">Mapa de la zona de Lista con los accesos a la estación de metro y las paradas y recorridos de las líneas de autobuses de la EMT. (NOTA: Las líneas nocturnas de bus de la EMT Madrid no están actualizadas de acuerdo con la reordenación de la red de autobuses nocturnos del 30 de septiembre de 2013) 1</div>
<div class="clr"></div>
</div>

Once you have done this, the container div will wrap both floated divs and you will be able to apply margins to it.

Put two div within container div

2 Answers2