.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Gaurav Pal
Post New Web Links

preventing overlapping left right aligned divs

Posted By:      Posted Date: October 16, 2010    Points: 0   Category :ASP.Net
I got 2 div layers left and right aligned.
when I resize page second div (pink) overlaps the first (green)

but I want right div can compress the left div as animated image.

is it not possible just via css ?
JQuery can do this with some code but how can do via CSS only?
any clue ? thanks for any answers. 

View Complete Post

More Related Resource Links

left / right aligned with wrap ?


I need a panel where I can define one or more controls docked to the left and one and or more controls docked to the right, but with the option of wrapping when there is not enough horizontal space, and the wrapped controls still needs to be right aligned on the next row.

I'm just about to start writing my one panel for this, but wonder if there is any way to achieve this with any existing panels?


formView pager aligned to the left in IE



I have a formView which has the PagerStyle horizontalAlign set as Centre. This displays correctly in FireFox but not in IE, im using IE 8... Below is the code for the page:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="photo_view2.aspx.vb" Inherits="Default2" title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="Heading" Runat="Server">
<asp:Content ID="Content3" ContentPlaceHolderID="mainBody" Runat="Server">
    &nbsp;<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:fpaConnectionString %>"
        SelectCommand="SELECT [photo_id], [photo_title], [photo_file_name] FROM [fpa_photo] WHERE ([photo_album_id_FK] = @photo_album_id_FK)">

left right margin


Hiii Coders ,

I have created my website. Now what is my requirement is that on higher resolution it should be centralized means margin from both sides should be same.

How can i get it working

plz provide me some code snippet plz

thanx and regards

divs do not display side by side


I have two divs. I want them to display side by side, on the same row. Using display:inline-block I can do that. But as soon as I position some text in the bottom right corner of div1, the two divs do not have the same vertical position. They are side by side, but the 2nd div starts at the vertical position of the positioned text in the 1st div.   Why would it do that?  Both Chrome and IE8 render it the same way.

( I am doing the nesting of the divs on the left side so that I can position absolutely within a div and not the page. I can't get text to position in the lower right corner of a div any other way. )


  <div style="border:2px solid black;">
    <div style="display:inline-block;">
      <div style="width:10em; height:4em; background:orange;color:White;
        <span style="position:absolute;bottom:0px;right:0px;">
        login message

    <div s

Drop-Right/Left submenus


 I'm currently using the CurvedMenuProjects custom control and I does almost everything I need a Menu Control to do but it doesn't swap submenu position (left/right) when the dropdown goes off the right edge of the screen.


Does anybody know if it's possible to configure the control to do this?


Any pointers on how I can get started writing the behavior into the custom control myself?




Only 12 days left in the Code Contest!


We are having a fun coding contest to find the best solution to a fairly trivial coding problem.  Come along and show off your skills . you might just win a totally awesome Gyroscope Powerball!

Participate in the Code Contest!

gap between inline-block divs


I have two divs, inline-block, width:50%.  When the width is 50% the two divs do not fit on the same line and the browser renders them one under the other.  Change the width to 49% and give them a background color. The divs render side by side, but with a small gap between them. I assume that gap is the reason the 50% width divs don't fit side by side. 

I am trying different combinations of margin:0; padding:0; line-height:0; border:0px;.

How can I make is so there is no gap, horizontal and vertical, between inline-block divs?


		<style type="text/css"> 




<body style="margin:0px; padding:0px;">

<div class="SideBySide" style="background-color:Green;">
<div class="SideBySide" style="background-color:Red;">


Preventing Manual DataBindings from Being Stupid...

Okay, This is rather annoying, but the basic situation is that using the Control.DataBindings() collection is often VERY simple easy and effective.  However, there are circumstances that require tweaking. Case and point: Application Settings via the My.Settings class structure.  Now, I have a "Preferences" form which upon the load of my application the first time, it requires the user set certain settings (and will cancel out of the app if the aren't defined on the first load).  All of this works fine, but I have a minor little glitch revolving around the Binding.Parse event and the Binding.WriteValue() method. Basically, when the Preferences form loads, all the controls that are bound to a My.Settings property, are set to DataSourceUpdateMode.Never.  In the Form.Load event, I execute a Control.DataBindings(0).ReadValue() on each of the controls that are bound.  This propagates the form with the appropriate values from the My.Settings Class.  Now the user changes/edits/modifies etcetera the values of the controls on the form, and based upon the appropriate values the OK Button will become enabled. Two of the values are "Folder Locations" but are uniquely formatted in my case, using a "special folder" moniker, for Desktop, or My Documents, etc, etc, etc, so if the user browses for a folder or types one in manually, m

How to center children divs?

I am trying to center children divs which floated left by using margin: 0 auto 0 auto. It did not work. Is there any way to center them?  thanks. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DIVAlignment.aspx.vb" Inherits="Test_DIVAlignment" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css" >    #formContainer{     width:600px;          margin:0 auto 0 auto;    }    #formContainer #caption{     font-size: medium;     font-weight: bold;     text-align:center;    }         #formContainer .MetaTitle{      float: left;       margin-left:20px;       width:80px;       text-align:left;       font-weight:bold;       background-color: #cc6633;  &

How can I align Left the text into a Button?

I've tried: Code Snippet Button button = new Button(); button.Width = 200; TextBlock textBlock = new TextBlock(); textBlock.Text = "Aligned text" textBlock.TextAlignment = TextAlignment.Left; button.Content = textBlock;   but it is not working.

side by side DIVs don't line up on same horizontal line.

the following html is intended to render 2 fixed height DIVs side by side, on the same line. Odd thing is, when I add some text content such as <span>, <p> or <h1>, to one of the divs, that div is drawn down by a varying number of lines. ( depending on the number of lines of block level content. ).  When I duplicate the content in both divs, they snap back up and line up on the same horizontal line. I am getting this behavior in both chrome and IE8.  Is there an explanation? <div style="height:160px; width:200px; display:inline-block;            border:1px solid black;margin:0;padding:0;"><p>line 1</p><p>line 2</p></div> <div style="height:160px; width:200px; display:inline-block;            border:1px solid black;margin:0;padding:0;"></div> thanks,  

Pie chart - overlapping labels?

I have a pie chart that has overlapping labels. I want the labels to display text plus the value, which I have working. However, not all of the labels are outside of the pie chart area, and thus are overlapping. Also, how can I set the pie chart to take up more room within the chart itself?   Here's a URL to see my chart:  http://i34.tinypic.com/23kt0sw.jpg

How to scroll the DataGrid (horizontally) when user drags a column header far left or right?

We're working with the WPF DataGrid and I have a question about  dragging column headers: The grid lets the user rearrange the columns, by dragging the column header left or right.  So far, so good. But, sometimes we have many columns, and only the first few columns are visible; so there is a horizontal scrollbar.  In such case, if the user drags a column header to the right edge of the DataGrid window, I want the DataGrid to scroll, automatically, one column at a time.  Is there an easy way to do that? (To be clear: yes, the user can already scroll horizontally by interacting with the horizontal scrollbar, but that isn't what I'm asking about.  I'm asking if the "drag a column header left or right" gesture can cause the DataGrid to scroll left or right.) I guess I could handle various low-level events, but it seems like it shouldn't be necessary -- DataGrid has so much functionality built-in, that I'm guessing it already has the ability to scroll when the user drags the column header to the edge.  So, is there either (a) a property that I can set, to tell the DataGrid to scroll when the user drags a column header to the edge of the window;  or (b) a code example showing how to achieve this effect myself?  Thanks!

Textblock and left/top alignment has different space

Hi, when i add a text the text is aligned left,top by default. At the left the text hits the edge, but at the top the text still has space left. Is this because of some special characters that need that space? I would like to show the text with left and top the same amount of space. <Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <TextBlock Background="Red" FontSize="100" FontFamily="Verdana" Padding="0" >T98}`|_*dfshjd sjlksdj dsjl djskldj lksj dlksj</TextBlock> </Grid> </Window>

How do I keep the #region/#endregion directives on the left edge, or is that possible (C#)?

Hello, How do I keep the #region/#endregion directives on the left edge, or is that possible (C#)? The #region/#endregion keep moving to the left to align with the rest of the code.  I don't want that to happen. Regards, Robert

Left Outer Join fails to return all records

I have a table tblDrop that contains 1067 records for 8/31/2010 and a table tblSoftcount that has 739 records, some with bad serial numbers. I need to match all of the records in tblDrop with those in tblSoftcount. I have a query using Left outer join that has worked for the duration of the application, but has recently stopped returing the full set of records from tblDrop. We have not changed the SQL versions on the server (compatibility level 2005). Here is the query: SELECT   v.SlotNum_ID, s.SlotNum_ID, v.PTNumber, s.PTNumber, v.DropBillAmount AS [Drop], v.ReportDate, v.DateValue     FROM tbl_Drop v LEFT OUTER JOIN tblSoftCount s ON v.SlotNum_ID = s.SlotNum_ID AND v.ReportDate = s.ReportDate WHERE   s.ReportDate = '8/31/2010' AND v.DropBillAmount <> 0 AND s.Slotnum_ID IS NULL;  
ASP.NetWindows Application  .NET Framework  C#  VB.Net  ADO.Net  
Sql Server  SharePoint  Silverlight  Others  All   

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend