0

I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:

http://jsfiddle.net/djxpU/

I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?

putvande
  • 15,068
  • 3
  • 34
  • 50
Ming
  • 744
  • 4
  • 13
  • 26
  • possible duplicate of [Make a div fill the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space) – PW Kad Aug 12 '13 at 20:51
  • 2
    Just an FYI, IDs **must** be unique. – j08691 Aug 12 '13 at 20:51
  • Because you're using `position:absolute`, the elements with white bg are no longer in the flow, so the blue block actually doesn't contain anything. – Chris Rockwell Aug 12 '13 at 20:56
  • I'm using a grid plugin (masonry), it's coded that way. I guess there's no solution to this. – Ming Aug 12 '13 at 21:03

3 Answers3

1

Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.

Is there a reason you need them positioned absolute?

EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/

Code (because I have to): margin: 0 auto;

Marconius
  • 683
  • 1
  • 5
  • 13
  • Yes you are right, I just want the white boxes to be centered. The problem is that it's a grid. Which mean I need to wrap all the X's with the absolute positions. – Ming Aug 12 '13 at 21:14
  • Ah, then there's really not much you can do. Could you not just manually set the size of the containing divs? – Marconius Aug 12 '13 at 21:44
1

If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{ width:100%; }

Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20
0

By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.

Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}

http://jsfiddle.net/yz3Dk/

Jacob VanScoy
  • 1,168
  • 6
  • 14