We Keep Coding

How to move items to left inside a div?

I have a label,checkboxlist and a datagridview within a div. I have used inline css to move items left. But it doesn't work as i expect. How can i move them? I want all the three items in a row. Below i have added my aspx code.
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>

You need to wrap gridview in div and set float:left to that div. Also inner div needs to have float:left as well.
Try below html
<div id="div2" style="width:100%; height:auto; margin-top:30px">
<div id="div21" style="width: 50%; height:auto;float:left">
<div id="div211" style=" width:15%; height:auto;float:left">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="float:left;width:45%">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField HeaderText="SomeText">
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>

Place gridview in a div and set float:left; property for that div
try this please:
<div id="div2" style="width: 100%; height: auto; margin-top: 30px">
<div id="div21" style="width: 50%; height: auto; float: left;">
<div id="div211" style="width: 15%; height: auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" Style="margin-top: 10px; margin-left: 20px">
</asp:Label>
</div>
<div id="div212" style="width: 60%; height: auto; float: left">
<asp:CheckBoxList ID="chklstKPI" Style="width: auto; height: auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div id="div22" style="width: 45%; height: auto; float: left;">
<asp:GridView ID="GridView1" runat="server" Style="float: left">
</asp:GridView>
</div>
</div>

Please add style to the divs:
<div id="div2" style="width:100%; height:auto; margin-top:30px; text-align: left;">
<div id="div21" style="width: 50%; height:auto; display: inline;">
<div id="div211" style=" width:15%; height:auto; display: inline;">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:20px">
</asp:Label>
</div>
<div id="div212" style=" width:60%; height:auto; float:left; display: inline;">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>
<div style="display: inline; width:50%">
<asp:GridView ID="GridView1" runat="server" style="float:left">
</asp:GridView>
</div>
</div>

You have to set float : left in style property of div
here i give you one example simply try to copy paste it
<div id="div2" style="width:100%; height:auto; margin-top:30px; position:absolute">
<div id="div21" style="width: 50%; height:auto">
<div id="div211" style=" width:15%; height:auto">
<asp:Label ID="lblKPI" Text="KPI :" runat="server" style="margin-top:10px; margin-left:200px; position:absolute">
</asp:Label>
</div>
<div id="div212" style=" width:60%; margin-left:200px; height:auto; float:left">
<asp:CheckBoxList ID="chklstKPI" style="width:auto; height:auto" runat="server">
</asp:CheckBoxList>
</div>
</div>

Refresh repeater control within few seconds continuously

hi i am doing a social network service on asp.net c#.I want to refresh the messages within 1 second without loading whole page. I am display messages using repeater control.
I want to refresh this repeater control continuously after 1 second, but whole page should not be reloaded.
repeater control code
setInterval(function () { $(".refresh").load(location.href + " .refresh"); }, 1000);
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
textbox code
<asp:TextBox ID="Message" runat="server" OnTextChanged="TextBox3_TextChanged" style="margin-left: 12px; text-align: left;" TextMode="MultiLine" Width="564px" Height="100px"></asp:TextBox>

Hope this helps:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Trans.aspx.cs" Inherits="WebClient.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function() {
setInterval(function () { $('#Repeater1').load(location.href + " #Repeater1"); }, 1000);
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<div style="border-top: thin none #BBCEB3; border-bottom: thin none #BBCEB3; padding: 10px; width: 548px; margin-top: 10px; right: 10px; left: 10px; border-left-width: thin; margin-left: 15px; background-color: #e9eaee; border-left-color: #BBCEB3; border-right-color: #BBCEB3;">
<br />
<div style="width: 58px; height: 40px">
<asp:Image ID="Image2" runat="server" Height="59px" ImageAlign="Top" ImageUrl="~/Profile/Image/Default.png" Width="55px" />
</div>
<div style="width: 307px; margin-left: 65px; margin-top: -60px">
<asp:Label ID="Label6" runat="server" Font-Bold="True" Font-Names="Arial" ForeColor="#000066"><%#Eval("SenderID") %> </asp:Label>
</div>
<div id="status" style=" width: 461px; margin-left: 78px; margin-top: 11px;"> <asp:Label ID="Label7" runat="server" Font-Italic="False" ForeColor="Black" Font-Size="Medium"><%#Eval("Messages") %> </asp:Label>
</div>
<div style="margin-left: 350px">
<asp:Label ID="Label11" runat="server" Text="Posted on: " Font-Size="Small"><%#Eval("Time") %> </asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</asp:Content>

how to stretch div based on content

CSS
#outer
{
position: relative;
z-index: 3;
width: 100%;
margin: 0px auto 0 auto;
background: #ffffff;
box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.2);
float:inherit;
}
#main
{
display:inline;
position: relative;
padding: 0px 0px 0px 0px;
width: 100%;
}
#header
{
position: relative;
padding: 28px;
height: 125px;
background: #ffffff;
color: #ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
border-bottom: solid 1px #003B47;
}
#copyright
{
padding: 40px 0 80px 0;
text-align: center;
color: #777777;
}
HTML
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="outer">
<div id="header" style="background-color: lightgrey">
</div>
</div>
<div id="main">
<div id="sidebar" style="background-color: lightgrey">
<div id="menubar">
<h2>
Menu
</h2>
<ul class="linkedList">
<li>
<img id="img12" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Server Search
</li>
<li>
<img id="img13" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Service Status
</li>
<li>
<img id="img14" src="./images/bt_tri.gif" alt="" width="16" height="16" runat="server"/>
Data Records
</li>
</ul>
</div>
</div>
<div id="content">
<div class="box">
<h2>
Member Details
</h2>
<p>
<asp:UpdatePanel id="Up1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvMem_Details" runat="server" SkinID="Professional" OnRowDataBound="gvMem_Details_RowDataBound">
<RowStyle Width="500px"/>
</asp:GridView>
<asp:Timer ID="Timer1" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel><br class="clear" />
</p>
</div>
<div class="box">
<h2>
Reservation Details
</h2>
<p>
<asp:UpdatePanel id="UpdatePanel1" runat="server">
<contenttemplate>
Last Refreshed : <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label><BR /><BR />
<asp:GridView id="gvRes_Details" runat="server" SkinID="Professional" OnRowDataBound="gvRes_Details_RowDataBound">
</asp:GridView>
<asp:Timer ID="Timer2" runat="server" Interval="600">
</asp:Timer>
</contenttemplate>
</asp:UpdatePanel>
</p>
</div>
</div><br class="clear" />
</div><br class="clear" />
</div>
<div id="copyright">
© Company. Design by Technies.
</div>
</form>
I have to stretch my div based on the content inside... i have head, body and copyright(lower) divs... I want body div size should be of its dynamic contents.

ListView control

I have designed a mockup in Photoshop and I intend to apply it to my product catalog's ListView control but it does not seem to be displaying it right (misaligned?) and I hope someone here could pintpoint my mistake as I've been trying to figure out to no avail.
Expected result/Mockup:
After debug (don't mind the missing photos):
Take a look at my codes,
CSS:
.productItem {
width: 200px;
float: left;
padding: 5px;
margin: 5px;
text-align: center;
background-color: White;
}
.cell1
{
width:117px;
height:27px;
background-image: url("images/blackbutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
.cell2
{
width:118px;
height:27px;
background-image: url("images/orangebutton.jpg");
float:left;
font-size:12px;
vertical-align:middle;
color:White;
text-align:center;
}
ListView narkup:
<div class="catalog">
<asp:ListView runat="server" ID="listView" GroupItemCount="3" DataSourceID="AccessDataSource1">
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="3" PagedControlID="listView" .Ю
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %> <%# Eval("ProductModel") %></b>
</div>
<div>
Our Price: $<%# Eval("NormalPrice") %>
</div>
</div>
<div class="cell1">Add to cart</div>
<div class="cell2">View details</div>
</ItemTemplate>
</asp:ListView>
</div>

Change cell1 and cell2 width to 50%
and try following layout:
<LayoutTemplate>
<div style="height: 962px;">
<div style="width: 790px;">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder" />
</div>
<asp:DataPager runat="server" ID="dpMyDatePager" PageSize="6" PagedControlID="listView"></asp:DataPager>
</div>
</LayoutTemplate>
<GroupTemplate>
<div style="clear: both;">
<asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
</div>
</GroupTemplate>
<ItemTemplate>
<div class="productItem">
<div>
<img src='<%# Eval("ProductUrl") %>' height="180" width="200" />
</div>
<div>
<b>
<%# Eval("ProductBrand") %>
<%# Eval("ProductModel") %></b></div>
<div style="clear: right;">
Our Price: $<%# Eval("NormalPrice") %></div>
<div class="cell1">
Add to cart</div>
<div class="cell2">
View details</div>
</div>
</ItemTemplate>

Lock Screen on my email sending page asp.net

i have a page wherein i need to lock the screen when user clicks on the send email button, but everything is happening except i am unable to see my lock screen page. i have used the update progress for this purpose.. m posting part of the code here
.aspx part
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table>
<td style="width: auto; vertical-align: top;">
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="width: 100%; background-color: black; moz-opacity: 0.5; khtml-opacity: .5;
opacity: .5; filter: alpha(opacity=50); z-index: 120; height: 100%; position: absolute;
top: 0; left: 0;">
<div id="progress" style="z-index: 200; background-color: White; position: absolute; top: 0pt;
left: 0pt; border: solid 1px black; padding: 5px 5px 5px 5px; text-align: center;">
<b>Mail in progress.Please Wait...</b>
<br />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</table>
.cs part
protected void btnSendResume_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
}
rest of the part i have not mentioned here...any help

Your HTML Table is incorrectly formed. You have no <tr> elements, but the real problem probably lies with your style attributes, please see my updated code below.
You can find a good example of how to accomplish what you are trying to do here: http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/
Try adjusting your code to the following:
<asp:UpdatePanel ID="SendMailUpdatePanel" runat="server">
<ContentTemplate>
<div style="float: right;">
<asp:Button ID="btnSend" runat="server" Text="Send" ToolTip="Send "
Visible="false" Font-Bold="True" OnClick="btnSendResume_Click" />
<asp:Button ID="btnDown" runat="server" Text="Download IDs" ToolTip="follow-up"
Visible="false" Font-Bold="True" OnClick="btnDownloadEmailIDs_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="SendMailUpdatePanel">
<ProgressTemplate>
<div id="blur" style="position:fixed; top:0px; bottom:0px; left:0px; right:0px; overflow:hidden; padding:0; margin:0; background-color:black; filter:alpha(opacity=50); opacity:0.5; z-index:1000;" />
<div id="progress" style="position:fixed; top:30%; left:43%; width:14%; z-index:1001; background-color:white; border:solid 1px black; padding:5px; text-align:center;">
<b>Mail in progress.Please Wait...</b>
<br />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>