Member Avatar for Martin C++

I have a content div that may very likely be shorter than sidebar div. They are both wraped in div with ID of "container". I need the content div to automatically change its height to be same tall as the sidebar. I included an image too.

Regards

layout_prob.jpg 28.31 KB
Edited by Martin C++ because: typo
  • 3 Contributors
  • 4 Replies
  • 216 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Martin C++

Dani AI

Generated

A short plan that fits the situation described (sidebar grows after load because of a Facebook widget and tab switching) and builds on suggestions from and .

Use modern CSS first — simplest, most robust

  • Make the wrapper a flex container so the two columns naturally stretch to the same height. That removes floats and the need to manually copy heights. Example (replace your float rules):
#container {
  display: flex;
  align-items: stretch; /* default, ensures equal height */
  width: 1000px;
  margin: 0 auto;
}

.post-wrap { flex: 1 1 auto; min-width: 640px; padding: 10px 15px; background: #fff; }
.sidebar { width: 300px; }

Flex items stretch to match the tallest sibling by default. (developer.mozilla.org)

When you need JS (async widgets or legacy layout)

  • If you must keep your current float layout, observe the sidebar and update the content min-height instead of running a tight loop. ResizeObserver is efficient and fires when an element’s size changes:
const sidebar = document.querySelector('.sidebar');
const content = document.querySelector('.post-wrap');

const ro = new ResizeObserver(entries => {
  for (const e of entries) content.style.minHeight = e.contentRect.height + 'px';
});
ro.observe(sidebar);

ResizeObserver is the right tool for reacting to layout/size changes without polling. (developer.mozilla.org)

Extra integration notes and caveats

  • If the FB/XFBML plugin is the cause, run your recalculation when the SDK finishes rendering (subscribe to the XFBML render event). (stackoverflow.com)
  • If DOM structure changes instead of size changes, use MutationObserver to detect additions/removals. (developer.mozilla.org)
  • Avoid busy setInterval loops; prefer event-driven updates or requestAnimationFrame-based scheduling for smoother, lower-cost updates. (developer.mozilla.org)

If supporting old IE, consider a table-cell fallback or a small JS shim — but for modern projects, switching to flexbox is the cleanest fix.

Recommended Answers

All 4 Replies

Member Avatar for Philippe.Lahaie

do you mean "at least as high as the sidebar" or "EXACTLY as high as the sidebar" ?

if "at least" then is sidebar fixed height or dynamic?


if fixed then i suggest : css , min-height

else javascript/jquery is gonna be needed to dynamicly fix height (if its not already taller)


if "exactly"

then javascript/jquery is pretty much you only option...


heres a few other suggestions but it might not work for all scenarios or background type.
i myself had to go the jquery way to create a css gradient on my side bar, that was as tall as the content pane next to it. (here)

otherwise :
very clever but somewhat hard to follow
faux columns

commented: Useful and informative post, thanks +2
Member Avatar for Martin C++

very clever but somewhat hard to follow

This would normally do the trick and this is a very clever technique which I will bookmark and thank you for sharing this with me, but in this case it cant be done cause in fact my sidebar doesn't have a background. It uses body background. I guess I have to use javascript help although I dont really want to trust javascript with so important task as it is layout. Thanks anyway, useful post.

Edited by Martin C++ because: n/a
Member Avatar for dfxgrid

I have a content div that may very likely be shorter than sidebar div. They are both wraped in div with ID of "container". I need the content div to automatically change its height to be same tall as the sidebar. I included an image too.

Regards

Can you post a link to your website or paste your code here? I can take a look, but it differs on how you have it structured.

Member Avatar for Martin C++

Can you post a link to your website or paste your code here? I can take a look, but it differs on how you have it structured.

I cant post link cause I m developing it in my localhost.

And in addition to my last post that javascript doesnt do the trick either. Atleast not at my knowledge of it, cause I have implanted a facebook widget on my site and it loads itself with a bit of a delay, so the script doesnt get adequate height of the container. Also I a possibility to scroll through different tabs in the module so the height of the sidebar changed even after the document has loaded, so I would need a script that constantly check container height. I was thinking on loop, but I m worried it would make the page very slow.


This the general structure of the code, ofc inside of them there is dynamically generated content.

<div id="container">
<div class="post-wrap"></div>
<div class="sidebar right"> </div>
</div>

And CSS that is applied to them atm

#container{width:1000px; margin:0 auto;padding-top:20px;}
.post-wrap {background:#FFF;border:1px solid #DDD;border-bottom:none;padding:10px 15px 10px 15px;width:640px;float:left;min-height:470px;height:100%;}
.sidebar {float:left;width:300px;color:#6E6E6E;}
.right {float:right;}

Theres more style attached to them but only this is relevant regarding the divs.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.