PDA

Click to See Complete Forum and Search --> : Position DIVs Side by Side

baldwingrand
02-27-2009, 04:45 PM
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.)



<!-- 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>
6StringGeek
02-27-2009, 05:00 PM
a highly oversimplified example using your code, minus the display: none:

<html>
<head>
<style>
#wrap {
width: 100%;
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>