Member Avatar for Bandit390

Ok, I'm new to asp, but not to visual studio(mainly c#).

I have a webform that I want to put buttons, labels, etc on. What is the normal procedure for the layout?

Do I create a bunch of divs on the form and use them?

Also, when I have a div and I add stuff to it, it changes all the positions of the stuff I already have in there. How do I stop that or am I doing something wrong?

I know these are some beginner questions. Just looking on how to create the layout/placement/etc of my form. Any answers, links, tutorials, would be helpful.

Thanks

  • 3 Contributors
  • 2 Replies
  • 199 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Fortinbra

Dani AI

Generated

raised a common starter question; offered an older-school option and pointed toward grouping controls before styling. Below is a concise, practical workflow with small examples and troubleshooting notes that fill the gaps in the thread and reflect modern, maintainable form layout practices.

Start with semantic HTML to express structure (logical groups and label relationships) and then apply CSS for visual layout. Example markup for a labeled row inside a grouped section:

<form>
  <fieldset>
    <legend>Contact</legend>
    <div class="form-row">
      <label for="name">Name</label>
      <input id="name" type="text" />
    </div>
  </fieldset>
</form>

For alignment and responsive behavior prefer CSS Flexbox for label/input rows and CSS Grid for multi-column form areas:

.form-row { display: flex; align-items: center; gap: 10px; }
.form-row label { width: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:600px){ .form-row{ flex-direction:column; } .form-row label{ width:auto; } }

If adding an element shifts others, common culprits are floats without clearing, use of position:absolute for main layout, or unexpected margins/padding. Inspect computed styles with browser DevTools, set box-sizing: border-box, and prefer flow/flex/grid layouts over manual absolute placement.

ASP.NET Web Forms tips: group server controls with an <asp:Panel CssClass="form-row" ClientIDMode="Static" runat="server"> and connect labels via AssociatedControlID (or HTML for) so assistive tech sees the relationship. Always create the markup structure first, then layer CSS and media queries for responsiveness and accessibility (fieldset/legend and proper labels).

Recommended Answers

All 2 Replies

Member Avatar for kvprajapati

>What is the normal procedure for the layout?

Start through table (html) tag.

Member Avatar for Fortinbra

The table tag is an easy route, but not the only route, nor the standards compliant route. Tables are supposed to be used for tabular data, not for page layout.

Your best bet would be to group your controls together in the order you need them in using div tags, then give each div an ID property or a CSSClass and use CSS for the rest. When placing the control on the page into the dive tags, just put them in the order you want them, and disregaurd their position on screen until you add the CSS for each one.
http://www.w3schools.com/css/default.asp
has a good tutorial for the CSS part of this.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.