Want div to grow with width 1

Glasgow · Jun 4, 2009

I must be doing something really dumb here but I just can't see it and I get the same symptoms in both Firefox & IE7. I want the width of the containing div (light blue box) to automatically grow according to the space occupied by the divs (darker blue) within it. But it expands to the width of the window.

Please put me out of my misery:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">

div.TableBlock      { height:auto; width:auto; background-color:rgb(112,187,244);
                      margin:3px; font-size:8pt; float:left;
                      border: 1px solid black; padding-bottom:5px; }
</style>
<title>Problem</title>
</head>

<body>
<div style="width:auto; border:solid 1px black; background-color:rgb(188,221,221); height:auto; padding:5px; overflow:auto">
    <div class="TableBlock">
      <p><b>Section 1</b></p>
    </div>
    <div class="TableBlock">
      <p><b>Section 2</b></p>
    </div>
    <div class="TableBlock">
      <p><b>Section 3</b></p>
    </div>
    <div class="TableBlock">
      <p><b>Section 4</b></p>
    </div>
    <div class="TableBlock">
      <p><b>Section 5</b></p>
    </div>
    <div class="TableBlock">
      <p><b>Section 6</b></p>
    </div>
</div>


</body>
</html>

BillyRayPreachersSon · Jun 4, 2009

Change this:

Code:

<div style="width:auto;

to this:

Code:

<div style="float:left;

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

BillyRayPreachersSon · Jun 4, 2009

P.S. You might now need to read this:

http://www.positioniseverything.net/easyclearing.html

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

BillyRayPreachersSon · Jun 4, 2009

You might also find that using display:inline-block works, but I didn't try that.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Glasgow · Jun 4, 2009

Indeed it does, thank you very much. I misunderstood the behaviour of "width:auto".

Glasgow · Jun 4, 2009

Sorry to drag this out but I realise that I'm not quite there or rather I have a slightly different problem. It expands but only to the width of the window and when I add more sections to the right (or reduce the size of the browser window) they appear vertically below the first few sections. How do I ensure that it expands as far as necessary to the right, forcing a scroll bar in the browser window if necessary?

BillyRayPreachersSon · Jun 4, 2009

I'll probably be proved wrong on this fairly quickly, but off the top of my head, I'm not sure you can do this with HTML/CSS alone.

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

Glasgow · Jun 4, 2009

Scuppered at the final hurdle! Thanks anyway.

I think perhaps I'll need to use a table.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Want div to grow with width 1

Glasgow

IS-IT--Management

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

Glasgow

IS-IT--Management

Glasgow

IS-IT--Management

BillyRayPreachersSon

Programmer

Glasgow

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor