www.webdeveloper.com
Results 1 to 2 of 2

Thread: Position DIVs Side by Side

  1. #1
    Join Date
    Apr 2008
    Posts
    64

    Position DIVs Side by Side

    I would like to position "divName", "divSortType", and "divEntry" side by side. I have tried using "float: left;" and it does line it up a little better, but still not exact. I've also tried replacing with <span> tags instead, and the same thing is happening. Any ideas? Thanks! (FYI- Display: none is the default; I have some show/hide Javascript.)

    HTML Code:
    <!-- Name -->
    <div id="divName" class="WebApps" style="display: none">
    <h4>First Name:</h4>
    <p><input name="txtFirstName" id="txtFirstName" type="text" size="25" maxlength="25"></p>
    <h4>Last Name:</h4>
    <p><input name="txtLastName" id="txtLastName" type="text" size="25" maxlength="25"></p>	
    </div>
    	
    <!-- Sort Type -->
    <div id="divSortType" class="WebApps" style="display:none">
    <h4>Sort Type:</h4>
    <p><input name="txtSortType" type="text" id="txtSortType" size="25" maxlength="25"></p>
    </div>
    
    <!-- Entry -->
    <div id="divEntry" class="WebApps" style="display:none">
    <h4>Entry:</h4>
    <p><input name="txtEntry" type="text" id="txtEntry" size="25" maxlength="25"></p>
    </div>

  2. #2
    Join Date
    Dec 2008
    Location
    Denver, Colorado
    Posts
    389
    a highly oversimplified example using your code, minus the display: none:

    Code:
    <html>
    <head>
    <style>
    #wrap {
    width: 100&#37;;
    text-align:center;
    margin:0 auto;
    }
    </style>
    </head><body>
    <div id="wrap">
    <div id="divName" class="WebApps" style="width: 33%;background: #ccc; float: left;">
    <h4>First Name:</h4>
    <p><input name="txtFirstName" id="txtFirstName" type="text" size="25" maxlength="25"></p>
    <h4>Last Name:</h4>
    <p><input name="txtLastName" id="txtLastName" type="text" size="25" maxlength="25"></p>	
    </div>
    	
    <!-- Sort Type -->
    <div id="divSortType" class="WebApps" style="width: 33%;float: left;">
    <h4>Sort Type:</h4>
    <p><input name="txtSortType" type="text" id="txtSortType" size="25" maxlength="25"></p>
    </div>
    
    <!-- Entry -->
    <div id="divEntry" class="WebApps" style="width: 33%;background: #ccc; float: left;">
    <h4>Entry:</h4>
    <p><input name="txtEntry" type="text" id="txtEntry" size="25" maxlength="25"></p>
    </div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles