Dynamic HTML body width (over 100%)

Question

I am creating a horizontal webpage and I am trying to make the body dynamically expand according to the content within it.

I am building the website here: http://www.obliquo.co.uk/

As you can see it all works, but I am forced to setting a huge body width in pixel value. The content on the page will be changing all the time. If I don't set a width in pixels, the divs start bumping vertically, naturally.

Answer 1

Your best bet would be to calculate the width the screen should be every time its changed using JS and then applying that value to the body's width attribute, again using JS.

Answer 2

Since you are already using jquery, you can do the following .. I tried it in IE8 and it works. You might have to tweak it a little for other browsers.

Add the script tag in your and this should do the trick, if you are planning on having the LINKS as your last section on the page. If you change that, you might have to play arround to make it more dynamic, but this is the basic principle that I would follow.

<script type="text/javascript">
            $(document).ready(function()
            {
                var width = $("#links").width() + $("#links").position().left;
                $("body").css("width", width + "px");
            });
</script>

Answer 3

I haven't taken the time to fully understand your HTML, but assuming the following structure:

<div id="container">
    <section>...</section>
    <section>...</section>
    <article>...</article>
    <article>...</article>
    <section>...</section>
    <section>...</section>
</div>

use the following CSS:

#container {
    white-space: nowrap;
}
section, article {
    display: inline-block;
    white-space: normal;
    /* no float */
}

This will allow each section/article to flow as an inline element would (i.e., wrap). But the white-space: nowrap declaration prevents the wrapping and keeps it on the same line.