"shrink" div to wrap around contents?

Tom Knowlton
Tom Knowlton used Ask the Experts™
on
<div id="foo"><div id="bar"></div></div>
<div id="foo2"><div id="bar2"></div></div>

 shrink div
I don't know ahead of time how wide the stuff inside the div is.

Can I use jquery to shrink the size of the div to fit?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You don't need jQuery to accomplish this.  divs will automatically size to the content by default.

If you are looking to center the div, simply set a wrapper around it:

<div id="container">
<div id="foo"><div id="bar"></div></div>
<div id="foo2"><div id="bar2"></div></div>
</div>

Set CSS as follows:

#container
{
       width: 100%;
       text-align: center;
}
#foo, #foo2
{
      display: table;
      margin: 0 auto;
}
Make sure your #foo and #foo2 divs do not have widths or min-widths assigned to them, or explicitly set width to auto.
Tom KnowltonWeb developer

Author

Commented:
Given the following controls, the div is not shrinking to fit the width of the controls:

<div id="divilatorCountries">
<asp:DropDownList ID="ddlCountry" runat="server" Width="261">
<asp:ListItem Value="US" Selected="True">United States</asp:ListItem>
<asp:ListItem Value="AF">Afghanistan</asp:ListItem>

...

...
<asp:ListItem Value="ZM">Zambia</asp:ListItem>
<asp:ListItem Value="ZW">Zimbabwe</asp:ListItem>
</asp:DropDownList>
</div><%--end of divilatorCountries--%>

Open in new window




<div id="divilatorStates">
<asp:DropDownList ID="ddlState" runat="server" Width="100px">
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem Value="AK">Alaska</asp:ListItem>

...

...

<asp:ListItem Value="WI">Wisconsin</asp:ListItem>
<asp:ListItem Value="WY">Wyoming</asp:ListItem>
</asp:DropDownList>
</div><%--end of divilatorStates--%>

Open in new window




When I apply the following jQuery code...the border is applied to the div and the div stretches across the screen"


$('div[id^="divilator"]').css("border","1px solid red");


It seems like the default behavior for the div is to have a width of 100%....


OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Tom KnowltonWeb developer

Author

Commented:
width is being set to auto higher up in the cascade, I just found out.

Is there a way to override?
Did you try wrapping the divs inside a containing div and setting the CSS as I mentioned?
<div class="container">
<div id="divilatorCountries">
<asp:DropDownList ID="ddlCountry" runat="server" Width="261">
<asp:ListItem Value="US" Selected="True">United States</asp:ListItem>
<asp:ListItem Value="AF">Afghanistan</asp:ListItem>

...

...
<asp:ListItem Value="ZM">Zambia</asp:ListItem>
<asp:ListItem Value="ZW">Zimbabwe</asp:ListItem>
</asp:DropDownList>
</div><%--end of divilatorCountries--%>
</div>

<div class="container">
<div id="divilatorStates">
<asp:DropDownList ID="ddlState" runat="server" Width="100px">
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem Value="AK">Alaska</asp:ListItem>

...

...

<asp:ListItem Value="WI">Wisconsin</asp:ListItem>
<asp:ListItem Value="WY">Wyoming</asp:ListItem>
</asp:DropDownList>
</div><%--end of divilatorStates--%>
</div>

.container
{
       width: 100%;
       text-align: center;
}
#divilatorCountries, #divilatorStates
{
      display: table;
      margin: 0 auto;
}
Tom KnowltonWeb developer

Author

Commented:
thx!
Anytime!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial