how to get image to show up to the left of panel (both in same row)


Tags: html,css,css3,twitter-bootstrap-3

Problem :

Why are the arrow images going into the panel? I put the arrow images into their own column but they are intersecting the panel. When I give the panel its own column then the images do not intersect it, but the gap between the images and the panel is too large. How do I get the arrow images to show up to the left of the of panel, in the same row?

<div class="row comment" id="1">
            <div  class="col-xs-1">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize">
            </div>
            <div >
                <div class="panel panel-default">
                    <div class="panel-heading">
                        user
                    </div>
                    <div class="panel-body">
                        text
                    </div>
                    <div class="panel-footer">
                        <ul class="list-inline">
                                <li><a class="reply" href="javascript:void(0)">reply</a></li>
                                <li><a class="expand" href="javascript:void(0)"> expand</a></li>
                                    <li><a class="delete" href="javascript:void(0)"> delete</a></li>
                                    <li><a class="edit" href="javascript:void(0)"> edit</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

CSS:

.comment{
    margin-left: 50px;
}

.resize{
    width:40px;
    height: auto;
}

Here is a fiddle. Here is how i want it to look :fiddle I cannot use this solution because I need the whole row to have the comment css rule that gives it a left margin of 50px since I will have many child comments inside of child comments.



Solution :

You can have the arrows in grid 1 and rest of the panel in remaining grids. This will have arrows and panels in the same row.

.comment{
    margin-left: 50px;
}

.resize{
    width:40px;
    height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row comment" id="1">
            <div  class="col-xs-1 arrows-block">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" name="up" class="img-responsive resize">
                    <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png" name="down" class="img-responsive resize">
            </div>
            <div class="col-xs-11" >
                <div class="panel panel-default">
                    <div class="panel-heading">
                        user
                    </div>
                    <div class="panel-body">
                        text
                    </div>
                    <div class="panel-footer">
                        <ul class="list-inline">
                                <li><a class="reply" href="javascript:void(0)">reply</a></li>
                                <li><a class="expand" href="javascript:void(0)"> expand</a></li>
                                    <li><a class="delete" href="javascript:void(0)"> delete</a></li>
                                    <li><a class="edit" href="javascript:void(0)"> edit</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>


    CSS Howto..

    how to properly override CSS in external file

    How to edit HTML with CSS? [closed]

    How can I change Bootstrap table-striped in a less specific way?

    How to use jQuery to set min-height the same as window

    How does Twitter put labels inside textboxes?

    How to set out css properly?

    How to apply css to top level element only

    How to change the position of image in search box in css?

    Force jQuery show/hide to respect display: table?

    How to equal height of