.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

positioning elements (relative & absolute divs and floating)

Posted By:      Posted Date: December 04, 2010    Points: 0   Category :SharePoint



I am finding that when I try to apply the rules for absolute and relative positioning and even float, the results aren't always what I expect.   ( I have divs that are absolutely & relatively positioned as well as floated.)

Is it possible to use relative, absolute and floated elements in a sharepoint 2007 site and have them behave as it would in a non-sharepoint site? I'm trying to determine if it's something I am doing wrong if it doesn't come out correctly. thanks for your input.



View Complete Post

More Related Resource Links

Absolute positioning

Hi all,I'm having VS 2008 professional. I'm trying to fix absolute positioning for a lable control. In Format menu position is not active when i click on lable? How can I do that or is this option not available in VS 2008?How can I align 2-3 controls as my layout control is not active?How can I use insert layer?Smitha

How to use getElementById to get the elements in a form

There are many ways of accessing form elements, of which the easiest is by using the cross-browser W3C DOM document.getElementById method. Before we learn more about this method, it would be useful to know something about the Document Object Model (DOM), the concept of HTML nodes or elements, and the concept of containers.

Each time you load an HTML page, the web browser generates an internal representation of the page in the form of an inverted tree structure. Let us look at a simple form. We will use this form later to demonstrate the use of the getElementById method.

How to position one control relative to another one even after resizing windows?


I used following Jquery code trying to make image close to a table. It worked fine after first load, but the position changed after window is resized. Any ideas? thanks

$(document).ready(function() {
            var pos = $("#mytable").offset();
            var width = $("#mytable").width();
            var left = pos.left + width + 20;
            var top = pos.top + 200;
                position: 'absolute',
                zIndex: 5000,
                left: left,
                top: top

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

Re-positioning an HTML container with javascript onresize with a Master page.


I have an HTML <div> container that I float to the right of a gridview.  When the browser window is maximized, it looks fine.  When minimized, the gridview positions below the floating container and most of the data is pushed off the bottom of the browser - you have to scroll down to see it.

If I position the floating container above the gridview it looks fine in a minimized window, but looks real bad when maximized.

What I want to do is use a javascript: onresize event to re-position the floating container up or down depending on the window.inner.width AND do it with a Master/Content page structure AND do it for only the one page where needed.

I can capture the onresize event and display the window dimensions but haven't figured-out how to do it with a Content page that still uses the Master page.  I think I'm having a very "thick" week...

- Tinker


Command Management: Use Design Patterns to Simplify the Relationship Between Menus and Form Elements


In Windows Forms applications, similar commands, such as those in a menu and their counterparts on a toolbar, are not automatically related. They don't fire the same event or run the same handler routine. Yet code that allows the same or similar user commands to fire the same code simplifies development.This article describes the principles of command management and why it's important to have functional commands that are not exclusive to any one UI element. In order to provide an MFC-like command management infrastructure, a design pattern is developed and applied as a series of C# classes.

Michael Foster and Gilberto Araya

MSDN Magazine October 2002

Wrong root, absolute paths '~' don't work.


Hi guys,

I have some kind of strange problem. I use Visual Studio 2008 Standard Edition, and whenever I use ~ in links (like PostBackUrl = "~/Admin/AddProduct.aspx"),  ~ is translated into "C:\DocumentAndSettings\User\Desktop" instead of my application root. Of course I dont have any project on Desktop. It happens in every project I run , even in project from pendrive which works properly on other computers.

How can i solve this problem ? What and where should i change ? I will be very thankful for any help.


Sharepoint Site Web Config elements Gets Deleted automatically


see i used to have a security filter settings in web config
security><requestFiltering><requestLimits maxAllowedContentLength="104857600"/></requestFiltering></security>
 but it gets deleted automatically after  i dont know why 
we tried to install something in our server yesterday it didn't worked and reverted it back to yesterdays stage( But i had updated the config files 3 weeks ago) 
but today i check the config files  these elements are  not there.

My system is 64 bit windows server 2008 with IIS 7 and MOSS 2007 SP2

(MVC & jQuery) Can't Add Datepicker to List of form elements



I'm still relatively new to jQuery (mostly finding things I need online and making simple changes). I have the following piece of code in my MVC app to render a partial view

<% int i = 0;
   foreach (var item in Model) { %>

        <td valign="top" style="border: none;">
            <%= Html.TextBox("MeetingList[" + i + "].Start", String.Format("{0:MM/dd/yyyy HH:mm}", item.Start), new { @style = "width: 120px;", @class="start" })%>
        <td valign="top" style="border: none;">
            <%= Html.TextBox("MeetingList[" + i + "].End", String.Format("{0:MM/dd/yyyy HH:mm}", item.End), new { @style = "width: 120px;", @class = "end" })%>

And I've tried the following to grab each of those 'MeetingList[...' items and add a datepicker to them,

        $(".start").each(function(index) {
            var $temp = $('#MeetingList[' + index + '].Start');
}); });


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;">


Video: Capabilities and Elements in Sandboxed Solutions in SharePoint 2010

This demonstration illustrates some of the allowed and disallowed operations in sandboxed Web Parts. (Length: 8:46)

config.web httpHandlers add and remove elements for ajax


I'm using an autocomplete contol of ajax toolkit. Yesterday a user found that it had stopped working (it wasn't generating the list as you type letters in the textbox). After hours of troubleshooting, I found that in web.config <httpHandlers>, this line -- <remove verb="*" path="*.asmx" /> was placed after the <add> line like this:

<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
<remove verb="*" path="*.asmx"/>

I fixed the problem by removing the <remove> line, but it seems I can also fix the problem by placing the <remove> line b

Failure to reliably iterate through all elements of a COM Collection from C# .NET 4.0

In C#, .NET 4.0, I am making a call to a COM DLL to return a collection object. A foreach loop steps through each element of the collection. In the loop, a new .NET object is created for each element of the COM collection. The new object is added to a new .NET collection. This works fine in the development environment. In a deployed system, is works correctly most (about 90%) of the time.  However, sometimes (about 5% of the time) the foreach loop finds no items in the COM collection. Other times (also about 5%), it finds the first 2 or 3 or ... N items.  Somehow, the enumeration interface exposed by the COM object is failing. Here is a code snippet from the COM Object, which is called NameList.  NOTE that the VB6 cls file was opened in a text editor to show the class and method attributes. VERSION 1.0 CLASS BEGIN MultiUse = -1 'True Persistable = 0 'NotPersistable DataBindingBehavior = 0 'vbNone DataSourceBehavior = 0 'vbNone MTSTransactionMode = 0 'NotAnMTSObject END Attribute VB_Name = "NameList" Attribute VB_GlobalNameSpace = False Attribute VB_Creatable = True Attribute VB_PredeclaredId = False Attribute VB_Exposed = True Attribute VB_Ext_KEY = "SavedWithClassBuilder6" ,"Yes" Attribute VB_Ext_KEY = "Top_Level" ,"Yes" Option Explicit Private mCol As Collection ' <snip> Only code rela

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;  &
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