Alignment issue with the content inside the two inline div?

Question

I have two div and inside div multiple div is there and I am facing the the alignment issue whatever content is inside the div is not proper align.

CSS Code:

.breadcrumb-nav{
    margin-left: 230px;
    left: 70px;
    top: 70px;
    width: 1291px;
    height: 66px;
    opacity: 100%;
    background: #EFEFEF;
}

.grid{
     margin-left: 230px;
}

/*Left Section Styling */

.left-content{
    top :104px;
    left: 151px;
    opacity: 100%;
    height: 20px;
    width: 194px;
}

.shown-device{
    line-height: 20px;
    width :147px;
    font-size: 16px;
    color :#101010;
    margin-top: 15px;
    margin-left: 40px;
}


.filter-by{
    left: 80px;
    top: 177px;
    width: 194px;
    height: 28px;
    background: #D8D8D8;
    margin-top: 6px;
}

.filter-by-heading-left{
    left: 86px;
    top: 182px;
    height: 17px;
    padding:5px 134px 6px 6px;
    font-weight: bold;
    font-size: 13px;
    line-height: 17px;
}

.filter-by-heading-right{
    left: 225px;
    top: 182px;
    height: 17px;
    padding:5px 6px 8px 133px;
    font-size: 11px;
    line-height: 17px;
}

/*Right Section Styling*/

.right-content .filter{
    margin-left: 229px;
    margin-top: 18px;
}

.filter-heading{
    width: 39px;
    height: 16px;
    font-size: 13px;
    line-height: 16px;
    color: #666666;

}

HTML Code:

<div class= "notification-content">
    <div class = "breadcrumb-nav">
        <h1>Devices</h1>
    </div>
    <div class = "grid">
        <div class = "left-content">
            <p class ="shown-device"><strong>1487</strong> device shown</p>
            <div class = "filter-by">
                <p class ="filter-by-heading-left">Filter By:</p>
                <a class =" filter-by-heading-right">Clear All</a>
            </div>
        </div>
        <div class = "right-content">
          <div class = "filter">
                <p class ="filter-heading">Filters:</p>
          </div>
<!--
            <div class = "soritng ">
                <select class = "sorting-select-box">
                    <option>Test1</option>
                    <option>Test2</option>
                    <option>Test3</option>
                </select>
            </div>
-->

        </div>
    </div>
</div>

I am attaching the screen shot also Clear All has to come inline with Filter ALL: and Filter has to come with Device shown as highlighted in attachment.

could you please create a [fiiddle](https://jsfiddle.net/) ? — Raviteja, Apr 19 '16 at 05:22
https://jsfiddle.net/AnitaMehta/vnfggv3j/, fiddle link, please check and let me know... — Anita Mehta, Apr 19 '16 at 05:32
I have updated the question, and my question is I have div inside div and the content inside the div is not proper align.... — Anita Mehta, Apr 19 '16 at 05:41
trying using `display: inline-block;` to display divs on the same line — brs, Apr 19 '16 at 05:51
I have draw the lines in screen shots where I want.....please see the attached screen shot — Anita Mehta, Apr 19 '16 at 05:52
@AnitaMehta Thats not the way to show, write the text, instead of lines what you need there, any how, I tried this check it once https://jsfiddle.net/zeasts/qcj9460w/2/ — Riot Zeast Captain, Apr 19 '16 at 05:53
try to see that [link](https://jsfiddle.net/vhdga961/). and, I think that, you just need two columns layout. You can find a lot of good examples how to do it just googling — BSeitkazin, Apr 19 '16 at 05:54

Sharon · Answer 1 · 2016-04-19T06:14:45.420

Here is a fiddle

Made changes in the following.. Hope this helps

.left-content{
  top :104px;
  left: 151px;
  opacity: 100%;
  height: 20px;
  width: 0;
  float: left;
}

.right-content{
  float: right;
}

.filter-by-heading-right{
  right: 0;
  top: -35px;
  height: 17px;
  padding: 0;
  position: relative;
  font-size: 11px;
  line-height: 17px;
  display: block;
  float: right;
}

Let me know whether you need your output like this..

score 0 · Answer 2 · edited May 23 '17 at 10:28

Try to see that link. And, I think that, you just need two columns layout. You can find a lot of good examples how to do it just googling.

I changed:

.left-content{
    top :104px;
    left: 151px;
    opacity: 100%;
    float: left;
    width: 60%;
    /*height: 20px;*/
    /*width: 294px;*/
}
.shown-device{
    line-height: 20px;
    width :147px;
    font-size: 16px;
    color :#101010;
    /*margin-top: 15px;*/
    margin-left: 120px;
}
.filter-by-heading-left{
    /*left: 86px;
    top: 182px;
    height: 17px;
    padding:5px 134px 6px 6px;
    font-weight: bold;
    font-size: 13px;
    line-height: 17px;*/
}
.right-content .filter{
    float: right;
    /*margin-left: 329px;*/
    width: 40%;
    margin-top: 6px;
}


flag

There are so many solutions,you can see this this

Alignment issue with the content inside the two inline div?

2 Answers2