Stacking Divs in Css - css

I’m trying to stack the #Direction Div on top of the two other Divs #Ratedpics and #Mainpics. I want them to be centered on each other. Also when the page resizes I want them to move proportionally with the page. Is this possible?
Rated pics and Main pics need to be side by side. Directions need to be centered on top.
div#MainPics
{
height: 650px;
width: 60%;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
margin-left: auto;
margin-right: auto;
}
#ratedpic
{
position: relative;
float: left;
width: 22%;
}
div#Direction
{
width: 20%;
margin-left: auto;
margin-right: auto;
}
<div id="Direction">
<asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large"
Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label>
</div>
<div id="ratedpic">
<p>
<asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label>
</p>
<asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br />
<asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label>
</p>
<asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" />
</div>
<div id="LeftPic">
<p>
<asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label>
</p>
<asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" />
</div>
</div>
HTml Output
<div id="Direction">
<span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span>
</div>
<div id="ratedpic">
<p>
<span id="MainContent_RatedPicnameLabel">Margaret</span>
</p>
<input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$RatedImage", "", false, "", "Member.aspx?UserID=9", false, false))" style="width:70%;" /><br />
<span id="MainContent_RatedPicRating">Banged: 52%</span><br />
</div>
<div id="MainPics">
<div id="RightPic">
<p>
<span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span>
</p>
<input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$FirstPicLink", "", false, "", "default.aspx?yesId=7&noId=7", false, false))" style="width:90%;" />
</div>
<div id="LeftPic">
<p>
<span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span>
</p>
<input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$SecondPicLink", "", false, "", "default.aspx?yesId=12&noId=7", false, false))" style="width:90%;" />
</div>
</div>

If I understand your question correctly, you'll need an extra wrapper around ratedpic and mainpic: http://jsfiddle.net/rgq4d/
I would also strongly recommend to make your CSS ID's all lowercase, in order to prevent typos.

Related

How to display RadListView right to left

I am using a Telerik RadListView (the elements are the same in a standard ASP.NET ListView) to show some data from a database. I want to show them in a tiled layout, but it loads the items from left to right.
For example - if I have 4 items in a row, the 5th item is shown on the left side. I tried to add dir="rtl" to all divs but that doesn't work.
How can I make this load items from right to left?
Here is my code:
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<%--<telerik:RadDataPagerGoToPageField />
<telerik:RadDataPagerNumericPageSizeField />--%>
</Fields>
</telerik:RadDataPager>
</div>
<div class="col-md-3">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="rlvFloated">
<div class="container-fluid" dir="rtl" style="text-align:right;">
<div class="row">
<div id="itemPlaceholder" runat="server">
</div>
</div>
</div>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="rlvI col-md-3 lv_items">
<asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
<table class="tbl_product">
<tr>
<td>
<asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no items to be displayed.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>
After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.
The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.
Below is an example of that.
.body {
height: 100px;
width: 500px;
background-color: red;
}
.child-container {
height: 100%;
float: right;
}
.child-1 {
height: 50%;
width: 100px;
float: left;
background-color: green;
}
.child-2 {
height: 50%;
width: 100px;
float: left;
background-color: orange;
}
.child-3 {
height: 50%;
width: 100px;
float: left;
background-color: blue;
}
<div class="body">
<div class="child-container">
<div class="child-1">
</div>
<div class="child-2">
</div>
<div class="child-3">
</div>
</div>
</div>

Changing controls order in row class div bootstrap 3

Well, I'am building a web application that uses twitter bootstrap 3 , and supports both languages English and Arabic with two different master pages for each,
am using div with class .row to put my controls inside
controls inside rows by default starts from left to right
when I change my website language to Arabic I want to reverse all items inside rows from right to left
am changing the master page with my stylesheet files, I've tried floating and directions but it never works for me for items inside div with .row class
<asp:Panel ID="pnl_TaskContent" runat="server" class="row">
<asp:Panel ID="pnl_TaskColumn" runat="server" class="col-md-12">
<div class="box-body">
<div class="row">
<div class="col-md-3">
<%--Task Name--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Name" runat="server" Text="Task Name" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil">
<asp:RequiredFieldValidator ID="RequiredFieldValidator27" runat="server" ErrorMessage="*"
ControlToValidate="txt_Task_Name" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:TextBox ID="txt_Task_Name" runat="server" ClientIDMode="Static" CssClass="form-control"></asp:TextBox>
<div class="input-group-btn">
<asp:Button ID="button_tf" CssClass="btn btn-default dropdown-toggle" runat="server" Text="Functions" data-toggle="dropdown" ValidationGroup="none" />
<ul class="dropdown-menu">
<li>
<asp:Button ID="btn_AddTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Add/Edit" data-toggle="modal" data-target="#addTaskFunctions-modal" /></li>
<li>
<asp:Button ID="btn_BrowseTaskFunModal" CssClass="btn btn-default btn-block" runat="server" ValidationGroup="novali" Text="Edit" data-toggle="modal" data-target="#BrowseTaskFunctions-modal" /></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<%--Task Status--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Status" runat="server" Text="Task Status" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-signal">
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server" ErrorMessage="*"
ControlToValidate="ddl_Task_Status" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:DropDownList ID="ddl_Task_Status" runat="server" ClientIDMode="Static" CssClass="form-control" Enabled="False">
<asp:ListItem Value="N">New</asp:ListItem>
<asp:ListItem Value="A">Active</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-3">
<%--Task Priority--%>
<div class="form-group">
<asp:Label ID="lbl_Task_Proirity" runat="server" Text="Task Priority" Font-Bold="True" Font-Italic="False"></asp:Label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flag">
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ErrorMessage="*"
ControlToValidate="ddl_Task_Proirity" ForeColor="Red" ValidationGroup="saveTask" Font-Bold="True" Font-Size="Medium"></asp:RequiredFieldValidator>
</i></span>
<asp:DropDownList ID="ddl_Task_Proirity" runat="server" ClientIDMode="Static" CssClass="form-control">
<asp:ListItem Value="H">High</asp:ListItem>
<asp:ListItem Value="M">Medium</asp:ListItem>
<asp:ListItem Value="L">Low</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-3">
<%--Completion Rate--%>
<div class="form-group">
<asp:Label ID="lbl_Task_CompRate" runat="server" Text="Completion Rate" Font-Bold="True" Font-Italic="False"></asp:Label>
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txt_Task_CompRate" ErrorMessage="0-100" Font-Bold="True" ForeColor="Red" MaximumValue="100" MinimumValue="0" SetFocusOnError="True" Type="Integer" ValidationGroup="saveTask"></asp:RangeValidator>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-flag">
<asp:RequiredFieldValidator ID="RequiredFieldValidator31" runat="server" ErrorMessage="*"
ControlToValidate="txt_Task_CompRate" ForeColor="Red" Font-Bold="True" Font-Size="Medium" ValidationGroup="saveTask"></asp:RequiredFieldValidator>
</i></span>
<asp:TextBox ID="txt_Task_CompRate" runat="server" ClientIDMode="Static" CssClass="form-control">0</asp:TextBox>
<span class="input-group-addon"><i><b>%</b>
</i></span>
</div>
</div>
</div>
</div>
what i want that when i change the display order to rtl, is to change the controls inside my row
When Direction From Left To Right but controls are not showing as expected
Well, you have unusable html in your post, so I can't test this, but last year I contributed to this old repository: https://github.com/carasmo/bootstrap-rtl/blob/master/dist/css/bootstrap-rtl.css
Has some useful code when you change direction. It's 3.1 but some of it still works well. You'll have to pick through it to see what you need to tweek.
Here's an example of the input-group fixes:
DEMO: http://jsbin.com/tipufu/1/edit
Assumes
body {direction:rtl}
CSS for RTL:
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.input-group-addon:first-child {
border-right: 1px solid #cccccc;
border-left: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.input-group-addon:last-child {
border-right: 0;
border-left: 1px solid #cccccc;
}
.input-group-btn:first-child > .btn {
margin-left: -1px;
}
.input-group-btn:last-child > .btn {
margin-right: -1px;
}
.input-group-btn > .btn {
position: relative;
}
.input-group-btn > .btn + .btn {
margin-right: -4px;
}
.input-group-btn > .btn:hover,
.input-group-btn > .btn:active {
z-index: 2;
}
SOME HTML
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

using inline content in jquery thickbox

I use JQuery ThickBox 3.1 , and here is my code
<telerik:RadListView runat="server" ID="myDataList" AllowPaging="true"
DataKeyNames="id" ItemPlaceholderID="PlaceHolder1"
NeedDataSource="list_DataRebind">
<LayoutTemplate>
<div class="sushibar">
<asp:Panel ID="SushiPanel" runat="server">
<div class="sushi">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="4" PagedControlID="myDataList">
<Fields>
<telerik:RadDataPagerButtonField />
<telerik:RadDataPagerPageSizeField />
<telerik:RadDataPagerSliderField />
</Fields>
</telerik:RadDataPager>
</asp:Panel>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<a href='<%#Eval("ImagePath")%>' title='<%#Eval("Title")%>' class="thickbox" >
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>
</telerik:RadListView>
Popup box with Image and Title show correctly , but I have another field(<%#Eval("Description")%>) to show with it !
I found how to show Inline Content in Thickbox ,
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a
caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"
class="thickbox">Show hidden modal content.</a>
But I don't know how to use this in a ListView !
:D , I found the answer ! Just put the contents ( Image + Description ) to hidden division (style with Display:none) and set this div id to inlineId .
<ItemTemplate>
<div class="imageDiv">
<span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
<%#Eval("Title") %></span>
<br />
<div id="popUpRegion" style="display: none">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="500px" height="600px" />
<p>
<%#Eval("Description")%></p>
</div>
<a href="#TB_inline?height=800&width=600&inlineId=popUpRegion" title='<%#Eval("Title")%>'
class="thickbox">
<img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
</ItemTemplate>

How to align buttons properly in css/asp.net?

I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
div.input
{
clear: left;
margin: 0 0 0.2em;
padding: 6pt 1em;
}
.flclass
{
float: left;
}
.imageDetails
{
color: Gray;
line-height: 1.2;
margin: 34px 0 0 10px;
}
input.special
{
background: none repeat scroll 0 0 #913297;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="input">
<label>
panel 1</label>
<asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
Width="200px" Height="70px">
<asp:Literal ID="lt1" runat="server" Text="Panel left" />
<asp:HyperLink ID="hl1" runat="server" Target="_blank">
<asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<div class="flclass">
<p class="imageDetails">
<asp:Literal ID="lt4" Text="what to write here?" runat="server" />
</p>
</div>
<label>
small image</label>
<asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
Height="42px">
<asp:Literal ID="lt2" runat="server" Text="Panel right" />
<asp:HyperLink ID="hl2" runat="server" Target="_blank">
<asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
</asp:Panel>
<p class="imageDetails" style="margin-top: 5px">
<asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
<div class="input" style="margin: top">
<label>
</label>
<asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" />
<asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" />
<asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
margin-left: 10px" Visible="true" />
<asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
Style="margin-top: 26px; margin-left: 10px" Visible="true" />
</div>
</div>
</form>
</body>
</html>
Change ur code
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
For future viewers, I found that this works better:
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.

Help with aligning the controls

I have a dropdownlist (asp.net) and when user change the selection from the dropdownlist it display respected div.
i need help in aligning the controls. and want to look like this:
DropdownListControl -- > selected_div -- > button
below is my soucr code....
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
<div id="divDateRangeSearch">
<div style="float: left">
<asp:Label ID="lblDateRange" runat="server" Text="Date Range"></asp:Label>
<br />
<uc1:DatePicker ID="FromDate" runat="server" />
<uc1:DatePicker ID="ToDate" runat="server" />
</div>
</div>
<div id="divSearchSubject" >
<div style="float: left">
<asp:Label ID="lblSubject" runat="server" Text="Subject"></asp:Label><br />
<asp:TextBox ID="txtSubject" runat="server" Width="225px"></asp:TextBox>
</div>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<br />
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
UPDATE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#main {
width: 800px;
}
#select {
float: left;
width: 250px;
border: 1px solid blue ;
}
#holder {
position: relative;
width: 300px;
float: left;
margin-left: 20px;
border: 1px solid red ;
}
#div_date, #div_subject, #div_status {
position: absolute;
top: 0;
left: 0;
}
#button {
float: left;
margin-left:20px
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(document).ready(function () {
$('#filterResultsBy').change(function () {
var sel = $(this).val();
$('#div_date').hide();
$('#div_subject').hide();
$('#div_status').hide();
if (sel === 'Date') {
$('#div_date').show();
}
else if (sel == 'Subject') {
$('#div_subject').show();
}
else if (sel == 'Status') {
$('#div_status').show();
}
});
});
</script>
<div id="main">
<div id="select">
Filter Results by:
<select id="filterResultsBy">
<option value="">Select...</option>
<option value="Date">Date</option>
<option value="Subject">Subject</option>
<option value="Status">Status</option>
</select>
</div>
<div id="holder">
<div id="div_date" style="width: 250px; display: none;" >
Date Range:
<asp:textbox width="50px" id="startdate" runat="server" /> - to - <asp:textbox width="50px" id="enddate" runat="server" />
</div>
<div id="div_subject" style="display: none;" >
Subject:
<asp:TextBox ID="txtSubject" runat="server" Width="225px" ></asp:TextBox>
</div>
<div id="div_status" style="display: none;" >
Status:
<asp:DropDownList ID="ddlStatus" runat="server" Width="152px">
</asp:DropDownList>
</div>
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>
</form>
</body>
</html>
Sure, not a problem. You can clean up your markup a bit on the div's that appear by removing the nested <div style="float: left">. The CSS would be as follows:
select {
float: left;
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch, #btnSearch {
float: left;
margin-left: 20px; /* put some space between the elements */
}
The above assumes that you're creating and destroying the respected <div>'s as you hide and show them. If you need them to all exist in the source and you'll show and hide them, you'll need something like the following:
#divHolder {
position: relative;
float: left;
width: 200px; /* adjust as needed */
}
#divDateRangeSearch, #divSearchSubject, #divStatusSearch {
position: absolute;
top: 0;
left: 0;
}
And the HTML:
<div id="divHolder">
<!-- Markup for the 3 divs would go in here -->
</div>
<asp:Button ID="btnSearch" Text="Search" runat="server" />
Try the following. You'll have to add your other two divs back in, and I'm assuming you toggle their visibility based on selection.
<div style="width: 880px; padding-top: 2px; border-bottom: none;
height: 28px;">
<div style="float:left">
<asp:Label ID="lblFilterResultsBy" runat="server" Text="Filter Results by:"></asp:Label>
<asp:DropDownList ID="ddlFilter" runat="server" Width="221px">
<asp:ListItem Text="Select..." Value=""></asp:ListItem>
<asp:ListItem Text="Date" Value="DATE"></asp:ListItem>
<asp:ListItem Text="Subject" Value="SUBJECT"></asp:ListItem>
<asp:ListItem Text="Status" Value="STATUS"></asp:ListItem>
</asp:DropDownList>
</div>
<div id="divStatusSearch">
<div style="float: left">
<asp:Label ID="lblStatus" runat="server" Text="Status" ></asp:Label>
<asp:DropDownList ID="ddStatus" runat="server" Width="152px" >
</asp:DropDownList>
</div>
</div>
<div style="float:left">
<asp:Button ID="btnSearch" Text="Search" runat="server" />
</div>

Resources