Absolute Positioning

To position a control on the page, you need to use all the usual tricks of HTML design, such as
paragraphs, line breaks, tables, and styles. Visual Studio assumes you want to position your elements
using flexible “flow” positioning, so content can grow and shrink dynamically without creating a layout
problem. However, you can also use absolute positioning mode (also known as grid layout) with the help
of the CSS standard. All you need to do is add an inline CSS style for your control that specifies absolute
positioning. Here’s an example that places a button exactly 100 pixels from the left edge of the page and
50 pixels from the top:


<asp:Button id="cmd" style="POSITION: absolute; left: 100px; top: 50px;"
runat="server" ... />
Once you’ve made this change, you’re free to drag the button around the window at will, and Visual
Studio will update the coordinates in the style correspondingly.
It rarely makes sense to position individual controls using absolute positioning. It doesn’t allow
your layout to adapt to different web browser window sizes, and it causes problems if the content in one
element expands, causing it to overlap another absolutely positioned element. It’s also a recipe for
inflexible layouts that are difficult to change in the future. However, you can use absolute positioning to
place entire containers, and then use flow content inside your container. For example, you could use
absolute positioning to keep a menu bar at the side, but use ordinary flow layout for the list of links
inside. The <div> container is a good choice for this purpose, because it has no built-in appearance
(although you can use style rules to apply a border, background color, and so on). The <div> is
essentially a floating box. In this example, it’s given a fixed 200 pixel width, and the height will expand to
fit the content inside.
<div style="POSITION: absolute; left: 100px; top: 50px; width:200px">
...
</div>