World is Welcome To The World of Linux

Journey into the world of linux

Menu
  • About
  • Welcome
Menu

CSS Positioning Tips And Tricks

Posted on May 30, 2010January 17, 2019 by Ganesh Sharma

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

In my previous article “How To Align Two Boxes using CSS.” I have written how to align the two boxes or “CSS In Php Specially For Joomla.”now am going to write about how to set positions in css and this article is really helpful who found the position problems with css in their templates….

Position:Static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-x {
 position:static;
}

Position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let’s move div-x down 20 pixels, and to the left 40 pixels:

#div-x {
position:relative;
top:20px;
left:-40px;
}

Notice the space where div-x normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-x That’s because div-x still occupies that original space in the document, even though we have moved it.

Position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Let’s move div-x1 to the top right of the page:

#div-x1 {
position:absolute;
top:0;
right:0;
width:200px;
}

Notice that this time, since div-x1 was removed from the document, the other elements on the page were positioned differently: div-x2, div-x3, and div-after moved up since div-1a was no longer there.

Also notice that div-x1 was positioned in the top right corner of the page. It’s nice to be able to position things directly the page, but it’s of limited value.

What I really want is to position div-x1 relative to div-x. And that’s where relative position comes back into play.

Note

  • There is a bug in the Windows IE browser: if you specify a relative width (like “width:50%”) then the width will be based on the parent element instead of on the positioning element.

Position:relative + position:absolute

If we set relative positioning on div-x, any elements within div-x will be positioned relative to div-x. Then if we set absolute positioning on div-x1, we can move it to the top right of div-x:

#div-x {
position:relative;
}
#div-x1 {
position:absolute;
top:0;
right:0;
width:200px;
}

Two column absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-x {
position:relative;
}
#div-x1 {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-x2 {
position:absolute;
top:0;
left:0;
width:200px;
}

Two column absolute height

One solution is to set a fixed height on the elements.

But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

#div-x {
position:relative;
height:250px;
}
#div-x1 {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-x2 {
position:absolute;
top:0;
left:0;
width:200px;
}

Float

For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).

#div-x1 {
float:left;
width:200px;
}

Float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-x1 {
float:left;
width:150px;
}
#div-x2 {
float:left;
width:150px;
}

Float columns with clear

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#div-x1 {
float:left;
width:190px;
}
#div-x2 {
float:left;
width:190px;
}
#div-x3{
clear:both;
}

Note: You can also check the use of relative position in previous article “How To Align Two Boxes using CSS”

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Date Command Tutorial(Video)
  • grep Command Tutorial – 1(Video)
  • Introduction To ls Command(Video)
  • Chapter 3
  • Set Position Of Poll Module Into Joomla

Recent Comments

  • Kansas City Trailer Proz on Physical Volume In AIX – A Primer
  • Create volume group in AIX | myunixsheet on How To Create Volume Group
  • Restore of AIX backup on other Unix system - TecHub on What is mksysb And What Are Its Components
  • Firewall Unleashed - InfoSec Institute on Packet Filtering Firewall: An Introduction
  • Manwendra on Proxy Firewall and Gateway Firewall: Introduction

Archives

  • January 2019
  • June 2010
  • May 2010
  • February 2010
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008

Categories

  • 30 Days To Joomla WebSite Setup
  • A Journey To The World of Linux System Administration
  • Aix
  • Backups
  • Books
  • Firewalls
  • Introduction
  • Joomla
  • Joomla Backup
  • Joomla Web Technology
  • Linux
  • LPAR and Virtualization
  • LVM
  • Pluggable Authentication Modules
  • section navigator pro
  • Security
  • Security Knowledge Base
  • Tips and Tricks
  • Uncategorized
  • World is Welcome Products

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
©2023 World is Welcome To The World of Linux | WordPress Theme by SuperbThemes