CSS to resize container, rather than cause overflow

Question

I have basic knowledge of CSS.

Using overflow isnt really ideal. Scroll bars are specific to the div, rather than the browser. So displaying on phones is a problem.(especially the iPhone which disables the scroll leaving content unaccessable).

Having overflow on visible is shown in the image, and obviously hidden isnt what i want.

So, is it possible to have the main div (white area) expand to contain the div rather than cause an overflow. The white part currently stops on the screen edge (before scrolling)

Take Stackoverflow for example. Its centered. and only when you cant contain it, does it go offscreen. But u simply scroll right to see the rest. I would much prefer mine centred too.

if anyone has an knowledge of how to achieve this, please let me know. The basic concept at the moment is

 <div id="main"> 
     <div id="sidebar"></div>
     <div id="body"></div>
 </div>

enter image description here

This is ASP.NET MVC 3

Do you have a link to an example page? – James Jan 13 '12 at 17:11 — James, Jan 13 '12 at 17:11

score 1 · Accepted Answer · edited May 23 '17 at 12:07

This is indeed quite tricky to achieve because there is no CSS way to resize parent elements according to their children's content, and also in JavaScript it's not straight-forward.

There is a solution though with jQuery using Rune Kaagaards solution to measure text. Basically the mini-script creates a span around your text and measures its width. You can then use it to resize your container:

<script type="text/javascript">
$(function() {
    //define the mini-function to measure text
    $.fn.textWidth = function(){
      var html_org = $(this).html();
      var html_calc = '<span>' + html_org + '</span>'
      $(this).html(html_calc);
      var width = $(this).find('span:first').width();
      $(this).html(html_org);
      return width;
    };

    //now resize your main container according to the body width. 
    $("#main").css("width", $("#body").textWidth());
    //this would be body + sidebar
    // $("#main").css("width", $("#body").textWidth()+$("#sidebar").textWidth());
});
</script>

Solution to your problem in jsfiddle: http://jsfiddle.net/TUrde/

CSS to resize container, rather than cause overflow

1 Answers1