nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

CSS - Stretch DIV to fit absolutely positioned objects

komodosp

Is it possible to stretch a DIV to fit its contents, when its contents are divs with position:absolute?

<div id='container' style='position:relative; border:1px solid #000000'>
 <div id='content1' style='position:absolute; top:150px; left:560px;'>
  blah blah blah
 </div>
 <div id='content2' style='position:absolute; top:900px; left:240px;'>
  yadda yadda yadda
 </div>
 <img src='mypic.jpg' style='float:left' />
 <div style='clear:both;'></div>
</div>

So I want container DIV to be a box around all the items contained therein. But it seems only to stretch to be big enough to contain the image.

Find more posts tagged with

css

stretch

div

absolute

Quick Links

Comments

Placebo

you need to define a width and height for your container div,
your position of the content is relative to that of its parent, so not sure why you have 900px; that must mean your parent div must be massive,

anyway see rough example here:
http://jsfiddle.net/TMgvy/

komodosp

you need to define a width and height for your container div

A but that's my problem - I don't want to define a width and height for my container div. A user will define the positions of the contents but I don't want them to have to worry about them doing the container too.

If they were relatively positioned, the container would just stretch to fit around them - I want to do the same thing only they are absolutely positioned.

Giblet

Is there a specific reason you need to use absolute positioning?

Stuff like style='position:absolute; top:900px; left:240px;'
Is breaking the flow of the document completely, and is pretty much abuse of css. Absolute position elements are not part of the flow, so don't affect objects which are.

ocallagh

If you reach a dead end with CSS3 and simple positioning you have usually done something wrong along the way! Ideally you should re-design the entire layout but if that's a non runner:

If you know the exact height of content2, you could stick a margin-top: (900px + height of content2) on the image.

Or use javascript.