Welcome to the MacNN Forums.

Synotic · May 18, 2003, 07:54 PM

Can anyone explain this? When I have a <div> with the width set to auto (the default anyways) it fills the enter body of the page. But auto means that the width be "only as wide as it needs to be to display the content". What's good on, I just want the div to have a dynamic size based on its contents.

Thanks

P.S. This will be my last post for a while

Millennium · May 18, 2003, 08:05 PM

I take it that what you're referring to is text blocks.

Text is an interesting beast with CSS. There are two algorithms at play here. The "width: auto" algorithm tries to make the box as narrow as it needs to be. However, the basic text-flow algorithm tries to make the text as wide as possible, to minimize the vertical space.

Because of this, text blocks with width:auto become as wide as possible. Often this means 100%, but there are a few important things to note. One, margins will keep the box from actually stretching the full width. Two, floating elements to one side or the other of a block of text will also keep things from stretching the width of the screen. And, of course, if the text is contained within another block, it can only get as wide as the containing block.

Note that when you use width:auto on something with a fixed width -such as images- the box will shrink to fit, because there's no algorithm making it wider.

Synotic · May 18, 2003, 10:43 PM

Thanks for the response, I understand why it does that somewhat... but even with images it still expands to the full width of the window. At least with Safari. Here is what I am trying to do:

http://132.162.242.166/twocolumn.html

I want to make the columns look as they do, however be centered relative to the page.

Wonder if I can embed some HTML...

<div>
<div style="background-color: blue; float: left;"><div style="width: auto; background-color: orange; float: left;">this is my second test</div>hello this is a test</div>
</div>

Simon Mundy · May 19, 2003, 05:57 AM

Here's a modified version of your page:

[php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>two-column</title>
<style type="text/css">
body { margin: 20px; }

#col0 { margin: 0 auto 0 auto; width: 300px; }
#col1 { width: auto; background-color: blue; float: left; }
#col2 { width: auto; background-color: orange; float: left; }
</style>
</head>

<body>
<div id="col0">
<div id="col1"><div id="col2">this is my second test</div>hello this is a test</div>
</div>
</body>
</html>
[/php]

Unless you provide an explicit width for the container of the two floats, they'll collapse to their minimum width.

The 'col0' DIV doesn't have to be 300px wide - it could be 50% or 70ems... Just as long as you define a width, it will work.

Note the margin property for left and right are set to 'auto' - this is what automatically centres the containing DIV within your layout.

Synotic · May 19, 2003, 03:57 PM

Simon, I appreciate the suggestion but it doesn't work correctly. 300px works exactly for that text and it looks centered. But if you change the text, then it becomes off centered
the idea is that the width can changed, and it reamins centered.

If anyone cares, I am trying to redo yahoo.com in CSS to better understand CSS because I maybe doing a similar column design later. Their design doesn't include any explicit widths and it appears that the text doesn't stretch it at all, it's just the images. In the right column there is an image which contrains the width. And on the left there are no giant images that are the width of the column so the text does change the size of the column. Should I not even try?

Simon Mundy · May 19, 2003, 07:39 PM

I'm encouraging as many people as possible to get into CSS - it's sped up development time on a number of my sites to a very acceptable lead time, it's clean and it's "the right way(!)" to get your layouts done.

That said, here's a modified version of that code to suit your purposes somewhat. Just play with the values (I've used %s but you could use fixed widths if you want):

[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>two-column</title>
<style type="text/css">
body { margin: 20px; }
#container { margin: 0 auto 0 auto; width: 80%; background-color: red; }
#rhboxes { width: 30%; background-color: blue; float: right; }
#content { background-color: orange; }
</style>
</head>

<body>
<div id="container">
<div id="rhboxes">hello this is a test<hr>This is another box...<hr>Put your 3rd box here...</div>
<div id="content">This is the main content</div>
</div>
</body>
</html>
[/PHP]

Yahoo.com uses a fixed width table (570px) to achieve its layout, but this way you can have a more flexible grid.