How to prevent from text to extend the
  • container height?

  • Tags: css,css3

    Problem :

    My code - Plunker

    I try to create a fluid layout, my sidebar is made of a list of links. I want each <li> element to be a perfect square, the problem starts when I add the text inside. It seems to be adding height to my square and what I get is a rectangle. If you examine my code the dimensions of my list objects are 32px X 43px. How can I prevent from an inside text to extend the <li> elements? And how can I make the text appear on the bottom left side of the <li> element?

    My CSS:

       width: 100%;
       margin: 0 auto;
     .content {
        width: 95%;
        display: inline;
        float: left;
          width: 5%;
          display: inline;
          float: left;
     .sidebar ul{
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style: none;
     .sidebar li{
        padding: 50%;
        background-color: oldlace;
      .sidebar a{
        display: block;
        font-size: 0.5em;

    My HTML:

     <body >
    <h1>Hello Plunker!</h1>
    <div class="sidebar">
            <li><a href="#">ANALYTICS</a></li>
            <li><a href="#">STYLES</a></li>
            <li><a href="#">VOTERS</a></li>
            <li><a href="#">GET STARTED</a></li>
            <li><a href="#">UPDATE</a></li>
    <div class="content">
      <p>Blahahhhahhhahahahahahahhahahah blahahahh bluah</p>

    Solution :

    You could use position: relative on the li and position: absolute on the a. Using absolute will cause the a element to not affect the li's dimensions. In this way you can also position it in the corner.

    .sidebar li{
          padding: 50%;
          position: relative;
    .sidebar a{
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;

      CSS Howto..

      How to draw a guitar string using css?

      How to create a drop down menu like the one in this picture

      how to use automatic css hyphens with word-break: break-all?

      How do I get Slick carousel to work? [closed]

      how to add a fixed position Box on left side of each post [closed]

      CSS how to automatically resize div size?

      How to specify a html tag on a LESS CSS nested class?

      how to set responsive background-image of element using css?

      How to set link visited color in JQuery

      How can I make a DIV cursor and background color change if I hover over it?

      How to keep div visible when hovering another div

      How to get the CSS width of a mobile device in ASP.NET MVC?

      How to add hover class to jQuery click(function() accordian divs?

      jQuery UI Droppable - How to allow only 1 element per drop zone, instead of stacking

      how to add css to selected row in treegrid GXT 3

      How to add custom css responsive in Avada WP Theme?

      How to get css button to stay active after it has been clicked?

      How to create a tiled background button using CSS

      How to make a “wrappanel” in html?

      How to target CSS module classes after they are hashed?

      How to make multiple left columns fixed and scroll the the rest columns in HTML table?

      CSS column header with img - how to dock img/div to the right?

      How to use css control to focus on div background when href link clicked

      How to put only certain elements of a div in a css box

      How to prevent crawlers depending on XPath from getting pages contents [duplicate]

      How to make element fade in on page scroll?

      How does Wired magazine achieve this thick underline link effect?

      How to create an interactive circular links using CSS [closed]

      how to center columns group

      How to adjust Capybara finders on a site using css-modules?