Question

I’m having an issue where I need to be able to change a series of divs to use “display: inline” based on if they are nested within a particular div, however I cannot determine how to select all the sub-divs. Maybe there is a simple CSS way to accomplish this, but I will describe the problem in more detail.

I have a web app that used a control suite and I do not have programmatic access to change the classes/structure that the controls use, however in the end they output HTML, JavaScript, etc. and make their way onto the DOM. The suite wraps the control in a div that is interpreted as a block div (since no display:value is specified) which causes an issue in situations where an image or icon was displayed next to the control , e.g. a help icon, since divs are rendered by default as block instead of in-line. The rest of the site needs to still treat the divs as block.

Is there any way to get the added divs to add style=”display: inline;” to all the items it tries to wrap either through jQuery or CSS?

In the example below, all the divs within/beneath ctl00_ContentPlaceHolder1_Area generally need to be changed to have display: inline, however more specifically divs that start with ctl00_ctl00_ContentPlaceHolder1_* and are within the div named ctl00_ContentPlaceHolder1_Area.

<div id="ctl00_ContentPlaceHolder1_Area"><div id="ctl00_ctl00_ContentPlaceHolder1_TextBox1Panel">
        <input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" onchange="javascript:setTimeout('WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$TextBox1", "", true, "", "", false, true))', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;javascript:$radIE.keyPress(event);" id="ctl00_ContentPlaceHolder1_TextBox1" class="RadInputMgr_Office2007 RadInput_Enabled_Office2007" onmouseover="javascript:$radIE.mouseOver(event);" onmouseout="javascript:$radIE.mouseOut(event);" onblur="javascript:$radIE.blur(event);" onfocus="javascript:$radIE.focus(event);" />
    </div> <img src="icon.png" alt="Small Image Icon"></div>

Answer 1

Try:

#ctl00_ContentPlaceHolder1_Area div[id^="ctl00_ctl00_ContentPlaceHolder1_"] {
    display: inline !important
}

If that works, see if it works without !important, which is bad practise.

Demo: http://jsfiddle.net/thirtydot/RGAm8/