CODEWITHSUNDEEP
htmlcss
Luca Nate Mahler
Luca Nate Mahler

Reputation: 1332

Divs in one line with dynamic width (justify)

I have a container which has left and right padding. Inside this container are two divs which should be side by side with a space between. Now because this space is fix but the site is responsive, the two text-divs must have a dynamic width. This is the reason why I can't use %-width.

I thought with text-align: justify it will work, but it doesn't.

Here is the JSFiddle: http://jsfiddle.net/qGw48/

Here the JSFiddle how it should look like: http://jsfiddle.net/4ekSm/ (it only works because of the %-widths)

Upvotes: 0

Views: 398

Answers (3)

Nemothefish
Nemothefish

Reputation: 47

Have you seen this http://jsfiddle.net/cUCvY/1/

I think It solves what your looking for

Two Divs next to each other, that then stack with responsive change

you could add some margin to one of the boxes ie

  .left{
   margin-right: 5px; 
  }

Upvotes: 0

tbailey000
tbailey000

Reputation: 141

This can be done fairly easily if you make the width value take into account the padding. So I'm using the style:

box-sizing: border-box;

http://jsfiddle.net/qGw48/1/

This means that when you set a width then the padding will be included in that value.

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

just change:

div#container > div {

display: inline-block;

}

to:

div#container > div {
    display: table-cell;
}

UPDATED FIDDLE

Upvotes: 2

Related Questions