Div of 100% width is superimposed on a 'span' floating to the left

Question

Div of 100% width is superimposed on a 'span' floating to the left

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I have the following HTML code:

<div class="tags-notice">
      <span class="item-tags"></span>
      <div class="content-etiquetas"></div>
</div>

And I want the div.content-etiquetas to face the span and occupy up to the 100% of its container, but if I tell the div to do the 100% it gets over span .

CSS:

.item-tags{
    width: 35px;
    height: 32px;
    float: left;
    -webkit-mask-size: cover;
    background-color: rgb(189,189,189);
    -webkit-mask: url(../images/botones/etiquetas.svg)!important;
    mask: url(../images/botones/etiquetas.svg) !important;
}

.content-etiquetas{
   width: 100%;
    min-height: 32px;
    border: 1px solid gray;
}

How can I solve this?

html css

asked by Andress Blend 14.06.2017 в 18:57

source

3 answers

0

Add z-index to your class.

content-etiquetas.{
   width: 100%;
    min-height: 32px;
    border: 1px solid gray;
    z-index: 1000
}

answered by 14.06.2017 в 19:01

0

You have an error in your code

.item-tags{
    width: 35px;
    height: 32px;
    display: block; <-- Pon esto aqui
    float: left; <-- QUITA EL FLOAT, PARA QUE NO SE PONGA A LA DERECHA
    -webkit-mask-size: cover;
    background-color: rgb(189,189,189);
    -webkit-mask: url(../images/botones/etiquetas.svg)!important;
    mask: url(../images/botones/etiquetas.svg) !important;
}

.content-etiquetas { <--- Cambia el punto de lugar al inicio
   width: 100%;
    min-height: 32px;
    border: 1px solid gray;
    display: block; <--- Pon esto aqui
}

Try to see if it works for you

answered by 14.06.2017 в 19:00

Remove spaces when pasting into Excel from DataGridView Print of tickets C #

score 1 · Accepted Answer

Yes, but this behavior is completely normal.

If you are giving width: 100%; to a child , the element will respect the width of the element parent . And because of that the element is occupying 100% of the parents.

When you give float: left; to the first child, then you have to clean the float using clear:left; ou clear:both; em um novo element, or add the float to the following elements as well, otherwise you will have that behavior of the elements are on top of each other because the clear did not occur nor the following elements have a float

Visual example of the previous description ( 2 ):

<div class="elemento float-left"></div>
<div class="clear-float"></div>
<div class="elemento-sin-float"></div>

.float-left {float:left;}
.clear-float {clear:both;}

Or float each element, and at the end clean float :

<div class="float-left"></div>
<div class="float-right"></div>
<div class="clear-float"></div>

.float-left {float:left;}
.float-right {float:right;}
.clear-float {clear:both;}

In this case, to put the two divs side by side, we will have to do some calculations ... That in this case we want to put a small div first, and a larger one that occupies most of the space . Let's say that the% co_of the largest% will have 90% of the space. If we remove div from 90% , 100% will be the rest. So our other 10% will be div which is the rest.

Here is a more visual example

.item-tags{
    width: 10%;
    height: 32px;
    float: left;
    background-color: rgb(89, 89, 89);
}

.content-etiquetas{
    width: 90%;
    min-height: 32px;
    border: 1px solid gray;
    float: left;
    box-sizing: border-box;
}

<div class="tags-notice">
      <span class="item-tags"></span>
      <div class="content-etiquetas"></div>
</div>

Keep in mind that width: 10%; was used in order to deal with the " box-sizing: border-box; " of extra space of the 1px . On the contrary, it did not have the same effect. Read more about this at W3Schools and also at Treehouse

(edition) Another best and most appropriate alternative solution for your problem

.tags-notice {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.tn-item {display: table-cell;}

.item-tags{
    width: 32px;
    height: 32px;
    background-color: rgb(89, 89, 89);
}
.content-etiquetas{
    min-height: 32px;
    border: 1px solid gray;
}

<div class="tags-notice">
      <span class="tn-item item-tags"></span>
      <div class="tn-item content-etiquetas"></div>
</div>