Find solution
How many 20kva perkins generators can fit in a 40foot container?

CSS absolute position within container div?

  • Hi web nerds. I'm a n00b having trouble with some CSS positioning stuff and it's driving me nuts. I'm trying to arrange multiple divs within a container div and nothing seems to work right. Details inside. Here's http://jsfiddle.net/dxqacs3e/5/. A server-side script on my site generates table and image pairs, each in its own div. Each pair of divs is nested in a container div. My problem is to arrange the two smaller divs within the container div using CSS. Basically, I want the 2nd nested div to come before the 1st within each container. (There may be a way to create the html in the proper order, but for right now I'd like to try to solve this with CSS). Now, if I knew how big each table and image were going to be, I could define the container as the proper size, set the container to position:relative and place the nested divs using position:absolute. This is how all the tutorials say to do it, and it works fine. The problem I have is that the tables have a variable number of columns, so I want the container div to automatically size itself to be big enough to hold both the table and image. However, as soon as I set the nested divs to be position:absolute, the container div seems to ignore them when determining its own height. This leaves the container too small for the table and image to fit inside, leading to chaos. To put in in terms of the fiddle example, I want the 2 green boxes to be big enough to hold a pair of red and blue boxes without knowing ahead of time how big the red and blue boxes will be. Is this at all possible?

  • Answer:

    This seems like something that could be solved with flexbox. What browsers do you need to support?

no regrets, coyote at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

Yeah, as you've discovered, absolute divs are laid "on top" of their containing box, and thus don't affect its size. Though flexbox sounds like a viable hack if you're not too worried about supporting 100% of browsers, the "right" answer is, in my opinion, to find a way to put the divs in the right order in the html in the first place.

drjimmy11

Here's my http://jsfiddle.net/ponti9/w5rhkLxf/1/ using CSS: .cont {position:relative; top:10px; left:100px; background: green; display: inline-block} .div1 {background:red; display:table-footer-group} .div2 {background:blue; display:table-header-group}

nightwood

Thanks for pointing me towards flexbox, that looks helpful. The site is just for personal use, but I'd like it to work on Chrome/Firefox/Android browser.

no regrets, coyote

sea change

The following replacement CSS will work: .cont {position:relative; background: green; height:200px} .div1 {background:red; position:absolute; bottom:0px; height: 20px;} .div2 {background:blue; position:absolute; top:0px; height: 20px} h1 {padding-top: 20px;} I've specified a height for the container, which makes things easier; as an alternative, you can specify padding on .cont like so padding: 1em 0 2em 0; and it looks pretty good. I should point out that this approach is brittle if you're concerned about responsive layouts. Another slightly weird approach that should be browser safe is use CSS to force the http://www.jtudsbury.com/thoughts/rearrange-div-order.php.

adamrice

Yeah, the problem really is that .div2 contains a table that could be anywhere from 2 to 50 rows, so I'm trying to find a way to do it without having to define a height for .cont beforehand. I'm coming around to the fact that this won't be as simple as I expected, and I may just change my plan for the layout of the page. I'll play around with the table header/footer trick and see if it works. Thanks!

no regrets, coyote

This will work: .cont {position:relative; top:200px; left:100px; background: green;} .div1 {background:red; margin-top:40px;} .div2 {background:blue; position:absolute; top:30px;} Rely on the regular positioning for the table, but give it a big top margin to leave space for the absolutely positioned image. Edit: I just realized you don't know how large the image is.

a dangerous ruin

I think that might do it nightwood! Thanks everyone for your help!

no regrets, coyote

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.