[RESOLVED] [vs2005] div display

[jlbantang]

hi team, im using divs to create a simple page layout with a few object on the page. the layout works perfectly but some of the controls are dislocated when run in browser.

CSS

.entry_form_col1  {height:25px; width:100px;float:left;border:0px none}
.entry_form_col2 {height:25px; width:400px;border:0px none}

HTML

<div style="margin-left:5px;  width:600px; height:200px">
<div ><strong>Work Activity Form</strong> </div>
<br />
<div style="width:100px;height:40px; float:left" >Description</div> <div style="width:400px;height:40px"><asp:TextBox ID="descriptionTextBox" runat="server" Width="330px" TextMode="MultiLine" ></asp:TextBox></div>
<div style="clear:both"></div>            
<div class="entry_form_col1">Total</div> <div class="entry_form_col2"><asp:TextBox ID="totalTextBox" runat="server" Width="100px"></asp:TextBox></div>
<div class="entry_form_col1">Expiry Date</div> <div class="entry_form_col2"><asp:TextBox ID="expirydateTextBox" runat="server" Width="100px"></asp:TextBox></div>
            
<div style="width:100px;height:40px; float:left" >Email Distribution</div> <div style="width:400px;height:40px"><asp:TextBox ID="emaildistributionTextBox" runat="server" Width="330px" TextMode="MultiLine" ></asp:TextBox></div>

<div class="entry_form_col1"></div> 
<div  class="entry_form_col2" ><asp:Button ID="save_closeButton" runat="server" Text="Save and Close" Width="135px" />             
<input id="Button1" type="button" value="Close"  onclick="javascript:self.close();"/></div>
</div>

[IMG] Uploaded with ImageShack.us[/IMG]

[kows]

.entry_form_col2 probably also needs to be floated left (or right).

[jlbantang]

hey,

.entry_form_col2 do not require float as it will terminate row control by purpose and place the succeeding control in the next line.

but i tried doing as you suggest and i did not work as well.

thanks.

[kows]

how about you draw something up of how you want it to look then, so that we have an idea of what you want to do?

[jlbantang]

hey,

i did not change the code from post #1.

[IMG][/IMG]

[kows]

sounds like you designed this with the visual studio design thing in mind, and so you would need to turn on compatibility mode in IE8. this, of course, makes it incompatible with all modern browsers.

you should be able to use something like this:

CSS:

.container {
  height: 200px;
  width: 600px;
}

.field {
  clear: left;
  float: left;
  height: 40px;
  width: 100px;
}

.control {
  float: left;
  height: 40px;
  width: 400px;
}

HTML:

<div class="container">

  <div class="field">Fieldname:</div>
  <div class="control"><asp:ControlName id="ControlId" /></div>

  <!-- and continue ... -->

</div>

[jlbantang]

hey,

great it works in opera and ie but not in firefox. some of the controls overlap one another. i tried playing with height but nothing seems to go correct.

[jlbantang]

hey,

got working by setting height of multiline textbox.