CODEWITHSUNDEEP
htmlcss
LASH
LASH

Reputation: 13

How to arranging two div beside each other?

I have two div(s) and I am going to arrange them beside each other, I set display inline-block for them but not working and one of them is more topper than other.

I want this: enter image description here

HTML:

<header>
    THIS IS HEADER
</header>
<div id="content">
<div id="fori-div" class="inline-st">Something will come here with some tabs...</div>
    <div id="send-ads" class="inline-st">
        <textarea id="send-ads-textarea" placeholder="Please write here...."/></textarea>
        <div id="product-list">
            <a href="#">Refrence 1</a>
            <a href="#">Refrence 2</a>
            <a href="#">Refrence 3</a>
            <a href="#">Refrence 4</a>
        </div>
</div>

</div>

<footer>THIS IS FOOTER</footer>

css:

    html,body{
    border:0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    direction: rtl;
}

header,footer{
    background: wheat;
    border-top: 3px solid red;
    border-bottom: 3px solid red;
}

#content{
    text-align: center;
}

.inline-st{
    display: inline-block;
    position: relative;
}
#send-ads{
    width:613px;
    height: 235px;
    background: white;
    border:1px solid #d6d6d6;
    padding: 14px;
}

#send-ads-textarea{
    width:581px;
    height: 131px;
    border:1px solid #dbdbdb;
    resize: none;
    padding:3px;
}
/*End #content> #send-ads*/


#fori-div{
    height: 235px;
    width:388px;
    background: green;
}

#product-list{
    background: red;
    margin-top:41px;
    height: 33px;

}

#product-list a{
    width:48px;
    height: 33px;
    display: inline-block;
    background: yellow;

}

But not working and not showing in above style (Image). DEMO

And when I add some content to right div (#second-div) it will come up and arranging right to left left div (#ads-div). DEMO

Please help and tell me the right CSS and HTML

Upvotes: 1

Views: 802

Answers (3)

Toby Cannon
Toby Cannon

Reputation: 735

Float both divs to the left, check out the fiddle

  #send-ads{
    float:left;
    width:613px;
    height: 235px;
    background: white;
    border:1px solid #d6d6d6;
}

    #second-div{
        float:left;
        width:150px;
        height:235px;
        background: red;
        border:1px solid #d6d6d6;
        margin-left:10px;
    }

Upvotes: 1

dazzling kumar
dazzling kumar

Reputation: 604

add float:left to second div and it will surly work

#second-div {
background: none repeat scroll 0 0 green;
float: left;
height: 235px;
width: 388px;

Upvotes: 0

majorhavoc
majorhavoc

Reputation: 2415

Add vertical-align:top to the class .inline-st

.inline-st {
display: inline-block;
position: relative;
vertical-align: top;
}

Upvotes: 6

Related Questions