Skip to main content

How to center a DIV

Now a days I am learning web technologies and want to share whatever I learn. The basic idea is to make my learning available to others and have them all at same place. I hope that it will be of some use to you all.
Why we need to center a DIV?
You must have seen few websites which have a centered layout. They will not span the whole computer screen. This is a really attractive and efficient design technique. It is quite soothing in looks and also it helps creating a site for almost all screen resolutions. e.g. www.w3schools.com.
Real work
Lets start the real work. We will be using HTML and CSS to achieve this.

Say you have a DIV as a parent control of your content. You want the content to be centered on the page.


< DIV id="divSiteBody">
...
...
...
< /DIV>
In your CSS style this DIV as:
#divSiteBody
{
 width:800px;
 margin:auto;
}
or you can style as:
#divSiteBody
{
 width:800px;
 margin-left:auto;
 margin-right:auto;
}
You can choose "width" as per your need, it sets the width of the DIV. The CSS margin properties define the space around elements.When we set margin(-left...) as auto, the browser sets the margin. The result of this is dependent of the browser.Thus when we use the first code snippet the vertical margins can also vary. Thus using second snippet is better.

More InsightWhen we use "auto" the browser will first assign the mentioned width to the DIV and then it will distribute the available space to the left and right margin. This is because they both gets the same priority.

The snippets have been tested IE,FF and Google Chrome.

Hope the post will be of some use. I will try to continue posting.
Labels:

Comments

Post a Comment

Popular posts from this blog

Create a background / taskbar application in c# .NET

Recently, I was working on integration of two windows applications. First application will launch the second application on login and then they both will communicate using pre-defined set of instructions. There were some complications (I am not going into them) and thus we decided to have a third application which actually will act as mediator. First application will launch the mediator (third application) and it will launch the second application. For this purpose we needed to create a task bar application (which will run in background). How To ·          Create a new windows project and delete the default form (Form1). ·          In Program.cs create a new class and inherit it from Form. ·          Please refer the code below. ·          Now change the Main method. In Application.Run change the startup objec...
2 comments
Read more

Check SQL Server Job status (State) using sp_help_job and xp_sqlagent_enum_jobs

This article is about checking the status of a SQL job. In our work place we have lot of SQL jobs. These jobs will run whole day and are business critical. They will load the data and generate extracts which will be used by business people. Thus, it becomes quite essential to support the system efficiently so that the job finishes in time and as desired. Also, while designing a new system sometimes we need to check the dependency of one job over another. In such scenario we need to check whether a particular job has finished or not. All this can be achieved in SQL Server by using the procedures:- sp_help_job xp_sqlagent_enum_jobs Note: xp_sqlagent_enum_jobs is an undocumented proc inside of sp_help_job and is used extensively to get SQL agent job information. sp_help_job: This procedure gives some insight into the status, and information, about a job. This stored procedure provides information such as last start time, job status etc. Syntax sp_help_job { [ @job_id= ] jo...
2 comments
Read more

Java 8 JMX Default Metrics

This is more of a note. Here you can find default types and attributes for JMX on top of Java 8. Code: I will clean and explain it later :( private static void WriteAttributes(final MBeanServer mBeanServer, final ObjectName http) throws InstanceNotFoundException, IntrospectionException, ReflectionException { MBeanInfo info = mBeanServer.getMBeanInfo(http); MBeanAttributeInfo[] attrInfo = info.getAttributes(); System.out.println("Attributes for object: " + http +":\n"); for (MBeanAttributeInfo attr : attrInfo) { System.out.println(" " + attr.getName() + "\n"); } } Attributes for object: java.lang:type=MemoryPool,name=Metaspace:   Name   Type   Valid   Usage   PeakUsage   MemoryManagerNames   UsageThreshold   UsageThresholdExceeded   UsageThresholdCount   UsageThresholdSupported   CollectionUsageThreshold   Collectio...
Post a Comment
Read more