div tags not formattted when view in browser

Question

judithSampathwa -2 Posting Pro in Training

13 Years Ago

hi there,

i am trying to build an website and i have formatted them with div tags, but when i view the same page in a web browser the text boxes and the labels are not in a proper place. how do i fix it

the code is below

<%@ Page Title="" Language="C#" MasterPageFile="~/View/Master/Site.master" AutoEventWireup="true"
    CodeFile="AddEdit.aspx.cs" Inherits="View_Vendor_Add" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" runat="Server">
    <div>
        <div>
            <h2 class="header2">
                Add New Vendor</h2>
        </div>
        <div>
        </div>
        <div style="width: 750px; height: 500px; margin-left: auto; margin-right: auto">
            <div style="width: 300px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblPO" runat="server" Text="ID"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtID" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblVendor" runat="server" Text="Vendor"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtVendor" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblAddres" runat="server" Text="Adress"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtAddres" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="Label1" runat="server" Text="Addres2"></asp:Label>
                </div>
                <div style="width: 200px; float: left;">
                    <asp:TextBox ID="txtAddres2" runat="server"></asp:TextBox>
                </div>
            </div>
            <div style="width: 400px; height: 30px;">
                <div style="width: 100px; float: left;">
                    <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
                </div>
                <div style="width: 100px; float: left;">
                    <asp:TextBox ID="txtCity" runat="server" Width="102px"></asp:TextBox>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:Label ID="Label2" runat="server" Text="State"></asp:Label>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:TextBox ID="TextBox2" runat="server" Width="50px"></asp:TextBox>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:Label ID="lblZip" runat="server" Text="Zip"></asp:Label>
                </div>
                <div style="width: 50px; float: left;">
                    <asp:TextBox ID="txtZip" runat="server" Width="50px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblContact" runat="server" Text="Contact"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtContact" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblTerms" runat="server" Text="Terms"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtTerms" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: left;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblTel" runat="server" Text="Telephone"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtTel" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 300px; height: 30px; float: right;">
                <div style="width: 100px; float: left">
                    <asp:Label ID="lblFax" runat="server" Text="Fax"></asp:Label>
                </div>
                <div style="width: 200px;">
                    <asp:TextBox ID="txtFax" runat="server" Width="200px"></asp:TextBox>
                </div>
            </div>
            <div style="width: 650px; height: 30px; margin-left: auto; margin-right: auto;">
            </div>
            <div style="width: 650px; height: 30px; margin-left: auto; margin-right: auto;">
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnAdd" runat="server" Text="Add" Width="60px" />
                </div>                
                <div style="width: 25px; height: 30px; float:right">                   
                </div>
                 <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnSearch" runat="server" Text="Search" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnRefresh" runat="server" Text="Refresh" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnEdit" runat="server" Text="Edit" Width="60px" />
                </div>
                <div style="width: 25px; height: 30px; float:right">                                   
                </div>
                <div style="width: 80px; height: 30px; float:right">
                    <asp:Button ID="btnDelete" runat="server" Text="Delete" Width="60px" />
                </div>
            </div>
        </div>
    </div>
</asp:Content>

asp asp.net

3 Contributors
6 Replies
167 Views
6 Days Discussion Span
Latest Post 13 Years Ago Latest Post by judithSampathwa

Reply to this topic

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.

ArtistScope -5 Junior Poster · Answer 1 · 2011-05-18T14:14:42+00:00

This forum is for Classic ASP and your code is obviously for ASP.Net.

breath2k 0 Newbie Poster · Answer 2 · 2011-05-18T18:21:39+00:00

In what way are they not in their proper place? Should the label and textbox be on a new line each time like a typical form? At the minute they won't because your first div is a width of 750px and the nested ones are 300px which means you'll get two of these on each line.

Firstly you should be using css to handle these divs the code will be easier to manage and re-use. Secondly set the divs to have the css display:block; this will make them full width unless a width is specified, this makes these easier to manage as well.

ArtistScope -5 Junior Poster · Answer 3 · 2011-05-18T20:51:28+00:00

Asp:TextBox is not used in Classic ASP. The topic doesn't belong here.

judithSampathwa -2 Posting Pro in Training · Answer 4 · 2011-05-18T21:11:50+00:00

In what way are they not in their proper place? Should the label and textbox be on a new line each time like a typical form? At the minute they won't because your first div is a width of 750px and the nested ones are 300px which means you'll get two of these on each line.
Firstly you should be using css to handle these divs the code will be easier to manage and re-use. Secondly set the divs to have the css display:block; this will make them full width unless a width is specified, this makes these easier to manage as well.

can you give me an example how to put the code to css?
what is display block can you give me more information on it

breath2k 0 Newbie Poster · Answer 5 · 2011-05-19T14:17:55+00:00

Have a look here for using stylesheets for css: http://webdesign.about.com/od/css/a/aa051203a.htm

display:block is a css element that takes up the full width available, with a new line before and after.

judithSampathwa -2 Posting Pro in Training · Answer 6 · 2011-05-19T19:12:45+00:00

This forum is for Classic ASP and your code is obviously for ASP.Net.

have i posted in the wrong forum???