I have a page that dynamically changes width based on different reports that can be selected. I would like the page to maintain a minimum width and then expand the whole page if the content is wider than the specified minimum.

The layout I have now works great when the content is below the width specified, but once the content is wider it spills out of the container to the right rather than expanding the white background on the header, content, and footer divs and centering them.

Here is the HTML I have so far. You can see the problem with the "really long word" overflowing the container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>hello world</title>
    <style type="text/css">
    body { background: #036; margin: 0 auto; width: 750px; }
    #container { }
    #header { background: #fff; margin-bottom: 30px; }
    #content { background: #fff; margin-bottom: 30px; }
    #footer { background: #fff; }
    </style>
  </head>
<body>
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean auctor tempor nunc.
Maecenas adipiscing est quis justo. Donec venenatis feugiat turpis. Aenean lacinia
erat eu neque. Sed massa erat, consequat quis, rutrum vitae, porta a, sem. Vestibulum
feugiat porttitor arcu. Sed eleifend. Proin enim. Morbi vel ligula at urna tempus
sagittis. Suspendisse augue dolor, gravida at, feugiat in, ultricies at, nisl. Maecenas
pretium, nunc pulvinar sollicitudin aliquet, lorem quam placerat mi, vitae aliquet mi
turpis a sapien. Praesent dapibus sollicitudin urna. Vestibulum ut sem in mi tincidunt
sollicitudin. Phasellus bibendum congue pede. Morbi porttitor, massa ac euismod
consectetuer, purus risus pellentesque enim, non porttitor lacus quam a tellus. Morbi
laoreet, lacus in sodales feugiat, arcu mauris commodo ligula, eu vestibulum nulla massa
id diam. Integer at nunc id odio venenatis accumsan. Donec rhoncus pellentesque est.
Mauris sollicitudin.
Reallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallyreallylongword
</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

3 answers

0
points

Have you tried to center the div with margin:auto; and use min-width for the it? Try this:

#content{
  margin: 0px auto;
  min-width:400px;
  width: 400px;
  width: auto !important;
}

Don't use a width on the body! Thats something you normally should never do. Add a wrapper div or something, but dont use the body!

Answered about 7 years ago by Sven Finke
0
points

you've put a fixed width on body, so container can't grow beyond it.

try min-width and max-width on container div and no width on body.

you will also need overflow:hidden or scroll to cope with the really long word that can't wrap.

e.g.

<style type="text/css">
body { }
#container {background: #036; margin: 0 auto; min-width: 750px; max-width: 1200px; overflow: hidden;  }
#header { background: #fff; margin-bottom: 30px; }
#content { background: #fff; margin-bottom: 30px; }
#footer { background: #fff; }
</style>
Answered about 7 years ago by Tony Crockford
  • What does IE6 on min-width and max-width? nothing, do you know how to fix this? Marcel about 7 years ago
  • I don't want the overflow to be hidden or to scroll. I want it to be visible and I want the header, content, and footer divs to all expand to the same width, all of which will accommodate the widest content on the page. cowgod about 7 years ago
  • The fix is don't code for IE6 ;>)! Unfortunately IE doesn't play nice with min- and max-width. I've seen this solution on a lot of different sites: http://www.cameronmoll.com/archives/000892.html tahdhaze09 about 7 years ago
0
points

Try:

word-wrap: break-word;

in your #content div.

Works in FF3.5, Safari 4, Google Chrome, IE7.

P.S. - it will not work in IE6.

Answered about 7 years ago by tahdhaze09
  • I don't want the content to wrap. This is a simplified example and the actual content is going to be a table with, potentially, hundreds of rows of data. I want the page to expand to accommodate any width necessary. cowgod about 7 years ago