CSS styled DIV that stretches in width to fit contents

John_Mc · 29-07-2009 4:05pm #1

Hi,

I have a div styled like so:

div.Wrapper div.MainContents
{
  margin-left:205px;
  margin-right:5px;
  display:block;
  min-height:500px;
  background-color:White;
}

Within this div, I have a Grid that is variable in width. At the moment, the Grid extends out past the container but I would like MainContents to stretch to fit this Grid.

How can I achieve this?

Thanks!
John

Eoin · 29-07-2009 4:44pm

Try this: display: table-cell seems to be the right property.

I have two parent divs below both with a fixed width. But they seem to expand OK if a child div is wider. (FF3 / IE7 / Chrome)

[html]
<style type="text/css">
.parentDiv
{
border: solid red 2px; display: table-cell; width: 390px;
}
</style>

<div class="parentDiv">
parent
<div style="border: solid green 2px; width: 410px;">child with wider width</div>
</div>
<br/>
<div class="parentDiv">
parent1
<div style="border: solid green 2px; width: 370px;">child without wider width</div>
</div>
[/html]

John_Mc · 29-07-2009 4:56pm

Hi Eoin,

Many thanks for your reply. Unfortunately it doesn't work though

Do you think this could be to do with the the Grid being a table with no specified width?

Thanks,
John

Eoin · 29-07-2009 5:01pm

Sorry! By grid, do you mean an ASP.net gridview that renders as a table or something? I just tried it with a table with loads of cells in one row (no width specified) and it expanded as expected. My CSS isn't great, I'm afraid.

Could it be something to do with the parent of the parent? Can you separate the two elements out to a different page and test it?

John_Mc · 30-07-2009 11:58am

eoin wrote: »

Sorry! By grid, do you mean an ASP.net gridview that renders as a table or something? I just tried it with a table with loads of cells in one row (no width specified) and it expanded as expected. My CSS isn't great, I'm afraid.

Could it be something to do with the parent of the parent? Can you separate the two elements out to a different page and test it?

Yes you were right, it was the container of the container that needed display: table-cell set.

Its working great in FF but not stretching in IE. I understand IE doesn't work with this, is there any hack that to workaround it?

Eoin · 30-07-2009 12:23pm

Weird, it seemed to work for me in IE7. Can you post the rendered HTML?

CSS styled DIV that stretches in width to fit contents

Comments