position 2 divs next to each other

Question

I have my div inside an html like below,

<div class="mainBlock">
    <div style="display: inline-block"> 
        <span>This Text-1 may be a bit lengthy</span>
    </div>

    <div style="display: inline-block;margin-left:50px">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>

Here is how it looks on my UI:

It has plenty of space to expand. The problem is, if the text in first div is short, the right div gets moved towards left (which is pretty obvious)

Now, what i require is the left side div should take some fixed width so that the right div will always be positioned at some fixed location.

Please advice the changes that needs to be done.

P.S. I want to avoid giving fixed width. I tried giving width of 50% to each div, but it isn't helping much.

use min-width, otherwise you're always going to have some kind of changes to the width — Dory Zidon, Oct 16 '15 at 11:20
Why so many answers are marked down (-1). i think not all of them deserve a -1. — ScrapCode, Oct 16 '15 at 13:02
@A.R. See http://meta.stackoverflow.com/questions/308184/answer-stealing-user-with-bad-attitude?noredirect=1#comment259270_308184 for the reason of this. — Steyn, Oct 16 '15 at 14:47
Possible duplicate of [Two divs side by side - Fluid display](http://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display) — apaul, Oct 16 '15 at 20:33

score 16 · Accepted Answer · edited Oct 30 '15 at 19:48

As showed in my comment and this jsFiddle

Using box-sizing: border-box; will fix a lot of your problems, you can read more about it here: Box Sizing Border Box FTW - Paul Irish

Using a width of 50%, floating and clearing the floats will do perfectly fine and will work responsively (mobiles, tablets) as well.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row:after {
  display: table;
  content: '';
  clear: both;
}

.column {
  float: left;
  width: 50%;
  border: 1px solid red;
}

<div class="row">
  <div class="column">Content, al lot of content. LOTS of content. Wow, this is asdf asd asd asd</div>
  <div class="column">Content</div>
</div>

score 4 · Answer 2 · answered Oct 16 '15 at 11:34

You can use flexbox...maybe will resolve your issue. I use the grow technique.

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.flex-item {
    -webkit-flex: none;
    flex: none;
    background: #f1f1f1;
}
.flex-item:nth-child(2) {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    padding-left: 10px;
}

HTML

<div class="flex-container">
    <div class="flex-item">This Text-1 may be a bit lengthy</div>
    <div class="flex-item">This Text-2 may be a bit lengthy</div>
</div>

DEMO HERE

score 2 · Answer 3 · answered Oct 16 '15 at 11:28

Try below code:

<div class="mainBlock">
    <div style="display: inline-block;min-width:200px"> 
        <span>This Text-2 may be a bit lengthy</span>
    </div>

    <div style="display: inline-block;margin-left:50px">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>

Here is a fiddle.

score 2 · Answer 4 · answered Oct 16 '15 at 11:54

You can use display: inline-block or float: left, as you prefer

inline-block way:

.mainBlock > div {
    width: calc(50% - 2px);
    display: inline-block;    
}

I have used a calc(50% - 2px) because for some reason if you use width: 50% the divs will appear in different lines because the browser render white spaces between each div in your html file and then they have not enough space (I think that's the reason. If you build your html content using javascript you can use with: 50% and it will work, because there are no white spaces between div elements).

float way:

.mainBlock > div {
    width: 50%;
    float: left;
}

You also could use display: flex but it won't work in IE9/IE10

Hope that helps

score 1 · Answer 5 · edited Oct 17 '15 at 08:16

1

Instead of using inline-block property you should float both divs left style="float:left" and use same margin property you have used in your html.

Instead of using inline css try using external or embedded css styling.

edited Oct 17 '15 at 08:16

Kristijan Iliev

4,901
10
28
47

answered Oct 16 '15 at 11:23

Äzhar

29
2

score 0 · Answer 6 · answered Oct 16 '15 at 11:24

0

Why not use a percentage based width, or min-width?

I think percentage width will work fine.

http://codepen.io/anon/pen/MaOgmx

answered Oct 16 '15 at 11:24

Paul Redmond

3,276
4
32
52

score 0 · Answer 7 · answered Oct 16 '15 at 11:25

0

You can add fixed with to both the divs and also add float left to all the divs. It will help you achieve what you want.

<div class="mainBlock" style="float: left;">
    <div style="width: 500px; float: left;"> 
        <span>This Text-1 may be a bit lengthy</span>
    </div>

    <div style="width: 500px; float: left;">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>

answered Oct 16 '15 at 11:25

Wolfack

2,667
1
26
50

But you're not clearing any of your floats.. The rest of the page would break instantaneously – Steyn Oct 16 '15 at 11:27

position 2 divs next to each other

7 Answers7