div tags not formattted when view in browser

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>

3

Contributors

6

Replies

5 Days

Discussion Span

2 Years Ago

Last Updated

7

Views

judithSampathwa

Posting Pro in Training

453 posts since May 2010

Reputation Points: 8

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

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

ArtistScope

Junior Poster

150 posts since Jun 2010

Reputation Points: 5

Solved Threads: 15

Skill Endorsements: 0

2 Years Ago

0

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.

breath2k

Newbie Poster

9 posts since Jan 2011

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

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

ArtistScope

Junior Poster

150 posts since Jun 2010

Reputation Points: 5

Solved Threads: 15

Skill Endorsements: 0

2 Years Ago

0

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

judithSampathwa

Posting Pro in Training

453 posts since May 2010

Reputation Points: 8

Solved Threads: 0

Skill Endorsements: 0

2 Years Ago

0

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.

breath2k