CODEWITHSUNDEEP
htmlcss
Arshad Rehmani
Arshad Rehmani

Reputation: 2185

position 2 divs next to each other

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: enter image description here

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.

Upvotes: 2

Views: 4008

Answers (7)

Steyn
Steyn

Reputation: 1321

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>

Upvotes: 16

&#196;zhar
&#196;zhar

Reputation: 29

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.

Upvotes: 1

diegorp
diegorp

Reputation: 77

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

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

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

Upvotes: 4

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

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.

Upvotes: 2

Wolfack
Wolfack

Reputation: 2769

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>

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

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

I think percentage width will work fine.

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

Upvotes: 0

Related Questions