CODEWITHSUNDEEP
csshtmlspace
Laxmana
Laxmana

Reputation: 1706

Equally spaced divs same space between divs and on the left and right off the screen - CSS

I have three divs with fixed width: 400px inside a container of with width: 100%

So let's say that we are on a 1920px screen.

The remaining space is 1920 - (400*3) = 720. So I want this available space to divide it by 4 and distribute it evenly. So the first div has to have on the left 180px, the space between the first div and the second to be 180px ,the space between the second and third div to be 180px and the space between the third div with the end of the screen to be 180px again.

The spaces between the divs and the screens should change depending the size of the screen.

Is it possible to do it with css?

Sample:

enter image description here

Upvotes: 0

Views: 2637

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

Display:flex is made for this :) . on container use : 

display:flex;
justify-content:space-around;

on child, just set a width, % or static value.

There's a work around with text-align:justify and display:inline-block; and pseudos if you need

test : here http://codepen.io/gc-nomade/pen/qcFBt/ padding inside

text-align version : http://codepen.io/gc-nomade/pen/piCtm/

Upvotes: 6

Related Questions