CODEWITHSUNDEEP
htmlcss
Don Chambers
Don Chambers

Reputation: 4251

How to make divs side-by-side with one fixed width and one the rest of the screen

I am having trouble getting two divs side-by-side, using css, and sized like I would like.

I want two divs side-by-side. The div on the left should have a fixed width of 200px. The div on the right should take up the rest of the screen.

Under certain conditions I'll hide the div on the left so the right div should take up the entire screen.

Does anyone know the solution?

Upvotes: 0

Views: 1173

Answers (2)

Luke P
Luke P

Reputation: 734

This is achievable using CSS alone with the calc function, see this fiddle for example: https://jsfiddle.net/jks421gy/1/

width: calc(100% - 200px);

You need to float the divs, then give the first one the fixed width, then the right one will be 100% of the space minus 200px.

Upvotes: 3

kpie
kpie

Reputation: 11100

umm have you tried using css classes? Beyond that perhaps twitter bootstrap offers the functionality you need. I also Have heard that masonry is descent and if you want a 1 file solution you can use inline styles.

Upvotes: 1

Related Questions