user3287550 user3287550 - 3 months ago 9
CSS Question

Footer content cannot get margin in new line

I've created a simple footer content that have this structure:

<div id="footer">
<div id="footer-content">
<p>System developed by a developer</p> |
<span id="select-language" class="label label-info">
english
</span>
</div>
</div>


Now I've applied this css:

#footer
{
background-color: #3A3A3A;
border-top: 1px solid #337ab7;
font-size: 13px;
overflow: auto;
color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
}

#footer *
{
padding: 10px 15px;
display: inline-block;
}


Essentially what I did is stick the footer at the bottom of the page, and I tried to get the content of the footer in one line. This working nice, but when I resize the page, the footer content is disposed in a new line (if there is no space enough for the other item in the footer), the problem's that the new line does not get the left margin that I've set
15px
what I can do for this?

Example:

enter image description here

I put a jsfiddle here.

Note that I'm also using
Bootstrap
. Thanks.

Answer

The | is not in any element, its plain text. That way the * in your CSS doesn't catch it.

Old and new example next to eachother:

The only difference is the div surrounding the |.

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    width: 200px;
}

#footer *
{
    padding: 10px 15px;
    display: inline-block;
}

#footer2
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 300px;
    width: 200px;
}

#footer2 *
{
    padding: 10px 15px;
    display: inline-block;
}
<div id="footer">
    <div id="footer-content">
        <p>System developed by a developer</p> |
        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>

<div id="footer2">
    <div id="footer-content">
        <p>System developed by a developer</p> 

        <div>
            |        <!-- Over here -->
        </div>

        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>