Vertical space on elements with position:absolute

html css positioning
Yisela picture Yisela · Aug 7, 2012 · Viewed 25.9k times · Source

How can I make elements with position:absolute and dynamic height occupy vertical space using only css? Is there any trick with containers and display that I can use?

Answer

Jeff Gortmaker picture Jeff Gortmaker · Aug 7, 2012

Unfortunately, using absolute positioning means, by definition, that your element is no longer taking up space. So no, only through css there is no way to do this.

You can of course use jQuery (or plain javascript) to accomplish this. How I'd do it is have a space element next to each vertical element. Enclose both the space element and the absolutely positioned vertical element in a relatively positioned div. On page load, change the height of the space element to match the height of the vertical element.

Related questions

Position an element relative to its container

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have …

Read More
How to make a HTML list appear horizontally instead of vertically using CSS only?

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. …

Read More
CSS position:fixed inside a positioned element

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so …

Read More