adding runat=“server” changes the behaviour of the layout

Answer 1

Add ClientMode="static" this will make sure your id is not changed to the clientside id for your control.

Answer 2

When you add runat="server" to a div, the system automatically generates the ID for it. It's referred to as ID mangling. Unfortunately there isn't much that you can do in the 2.0 framework for divs that I'm aware of (without it being a pain anyway), but in 4.0 we're getting an override... On custom controls though (in 2.0) you can override the ClientID and UniqueID fields. So if you created a MyDiv class that used the div as a base and then created the ClientID/UniqueID fields you should be ok.

Your other option would be to update your CSS/javascript to use the mangled ID. It's fairly static based on the position within the page as ASP.Net uses it to find a control during postback.

Answer 3

If you're targetting the ID of the div control in CSS and then running the control at server, you'll find it no longer applies the style.

This is because ASP.NET has a built in mechanism (INamingContainer) to ensure than you don't have multiple controls named the same. It does this by adding container prefixes so you end up with:

<div id="ctl00_ctl00_myDivName" runat="server" />

The easiest way around this is to change it from working on an ID to working on a class:

<div class="myDiv" runat="server"></div>

Alternatively, I believe that XHTML requires that Divs have closing tags so use

<div runat="server">Some content</div>