Question

I m having problem to determine from where extra padding is added to a div.

The div containing the text “Video Title” has too much padding added to it. Which is very much unwanted. And i have no idea from where this extra padding is coming.

I have added the styles, the html codes and the link to a page using this sample page.

Please have a look, I’m about to go insane.

---

The style —

<style type="text/css">
    html *
    {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
    }
    table.video_list
    {
        width: 100%;
        border-collapse: collapse;
    }

    table.video_list td
    {
        padding: 5px;
        width: 33%;
    }

    div.vid_container
    {

        /*float:left;*/
        /*margin-bottom:15px;
        margin-left:5px;
        margin-right:15px;*/
        position: relative;
        display: inline-block;
        /*width:242px;*/
        margin: 10px;
        /*width: 300px;*/
    }

    div.vid_container div.duration
    {
        /*background-color:#160A07;*/
        /*background-color: transparent;
        background-image: url(../images/backs/duration_back_58x24.png);
        background-position: center center;
        background-repeat: no-repeat;*/

        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;

        background-color: #1b1b1b;
        bottom:27px;
        color:#FFFFFF;
        float:right;
        font-size:14px;
        padding:4px;
        position:relative;
        right:2px;
        text-align:center;
        width:50px;
        filter: alpha(opacity = 85);
        opacity: 0.85;
        font-weight: bold;

    }

    div.vid_container div.info_holder
    {
        width: 248px;
        margin: auto;
        display: block;
    }

    div.vid_container div.thumb_holder
    {
        width: 244px;
        height: 184px;
        vertical-align: middle;
        border: solid 1px #323434;
        padding: 1px;
        margin: auto;
    }

    div.vid_container div.thumb_holder img.thumb
    {
        width: 236px;
        height: 176px;
        vertical-align: middle;
        border: solid 1px #323434;
    }
    div.vid_container a.title
    {
        color:#DBA0AC;
        display:block;
        font-size:14px;
        height:35px;
        overflow:hidden;
        text-decoration:none;
        white-space:pre-line;
        width:248px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container a.title:hover
    {
        text-decoration: underline;
    }

    div.vid_container div.info_holder div.info_text
    {
        margin-top:5px;
        text-align: left;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    div.vid_container div.info_holder div.time
    {
        color: #ccc;margin-top: 5px;font-size: 90%;
        text-align: left
    }




    /******************************************
        Videos list
    ******************************************/

    .vid_container .site_name
    {
        text-transform: capitalize !important;
    }

    .vid_container img.thumb
    {
        width: 242px !important;
        height: 182px !important;
        border:1px solid #323434 !important;
    }

    /******************************************
        List View
    ******************************************/

    div.vid_container_listview
    {
        width: 100% !important;
    }

    div.vid_container_listview div.thumb_holder
    {
        float: left !important;
    }

    div.vid_container_listview div.info_holder
    {
        float: left !important;
        margin-left: 10px;
    }

    div.vid_container_listview div.info_holder div.title_holder
    {
        min-height:30px;width:600px;
    }

    div.vid_container_listview div.info_holder div.info_text
    {
        color: #ccc;margin-top: 5px;
    }

    div.vid_container_listview div.info_holder div.info_text div.site_name
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.info_text div.likes_and_views
    {
        font-size: 100%;margin-top:15px;
    }

    div.vid_container_listview div.info_holder div.added_at
    {
        color: #ccc;margin-top: 5px;font-size: 100%;
    }

    div.vid_container_listview a.title
    {
        font-size: 16px;
        font-weight: bold;
    }

    .float_left
    {
        float: left;
    }

    .float_right
    {
        float: right;
    }

    .clear
    {
        clear: both;
    }
</style>

And the Html:

<div class="vid_container">
    <div class="thumb_holder">
        <a href="#" title="Brunette Teen Paige Taylor">
            <img alt="Brunette Teen Paige Taylor" class="thumb" src="empty_thumb.png" norotate="1" />
        </a>

        <div class="duration">30:16</div>
    </div>

    <div class="info_holder">
        <div class="info_text">
            <a class="title" href="#" title="Brunette Teen Paige Taylor">Video Title</a>
        </div>  

        <div class="time">16 days  ago</div>                    

        <div style="color: #ccc;margin-top: 5px;">
            <div class="float_left site_name" style="font-size: 90%;">Youtube</div>
            <div class="float_right" style="text-align:right;padding-right: 2px;font-size: 90%;">1 likes — 140 views</div>
            <div class="clear"></div>
        </div>
    </div>
</div>

The link to this sample page is: Sample Page

Answer 1

You need to change the div.vid_container a.title rule

remove the overflow:hidden and change the height:35px to

height:auto!important;
height:35px;
min-height:35px;

UPDATE

i see … the problem is that the .duration box is positioned relative and so it remains in the flow of the DOM .. that is what takes the space above the .title..

you need to set the .duration to have position:absolute and margin-top:-27px; (and remove the bottom property

that should take care of all problems..