Monday, January 2, 2017

CSS/LESS problem - parent of a floating element has no height

Scenario, you have a floating element (float:left for example), and its parent DIV shows height=0px.

Example, HTML:

<ol class="breadcrumb">

<li>
<a href="#"  class="active"> FIRST GALLERY</a>
</li>


<li>
<a href="#" > SECOND GALLERY</a>
</li>

</ol>



LESS code:

...
    ol{
        margin-left:auto;
        margin-right:auto;
        display:block;
        text-align:center;

    }



    li{

        list-style: none;
        float:left;
    }
...


Solution:


Add this CSS code to make sure ol element gets proper height:



    /* force parent element to set its height properly, to contain floating element:  */
   ol:after{
        clear:both;
        content: "";
        display: block;
    }


No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...