Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Container does not fill image height

    Dear friends,
    I have to put an image into a container, it should be aligned to left and surrounded by text.
    The container has a background and it must to fit relatively to its content (text+image).
    Instead, although text surronds properly the image, the container (and its background) follows only the text block and ignores the image's height. So, if the image is higher than text block, it exits out from the background.
    If I put display:inline-block to .Container class the container has a wrong width when it contains only text.

    Where did I go wrong?
    Thank you very much

    Code:
     <div class="Container">
                <img src="images/test.jpg"/ class="LeftAlign">
                text..........
           </div>
    Code:
    .Container
    {
        position:relative;
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
        padding-right: 30px;
        margin-left: 130px;
        margin-right: 10%;
        background-color: rgba(255,255,255,0.6);
    }
    .LeftAlign
    {
        float:left;
        padding-right:10px;
        padding-bottom:10px;
        width: 30%;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    Give the .Container a height. Or overflow:auto;
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    May 2014
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Give the .Container a height. Or overflow:auto;
    Fantastic!
    Overflow solved the problem.
    Many thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •