Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

This is just a quick tutorial for anyone hoping to learn about positioning in CSS.  In 9 steps I'll show you how positioning works so you'll have an easier time with your Advanced CSS area of the Design Studio

1. 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-1 {  position:static; } 




--------------------------------------------------------------------------------------------------



2. 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-1 down 20 pixels, and to the left 40 pixels:

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

Notice the space where div-1 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-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

-----------------------------------------------------------------------------------------

3. 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-1a to the top right of the page:

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

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

Also notice that div-1a 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-1a relative to div-1. And that's where relative position comes back into play.

Footnotes

  • 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.

----------------------------------------------------------------------------------------------------

4. position:relative + position:absolute

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

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





----------------------------------------------------------------------------------------------------


5. two column absolute

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

#div-1 {  position:relative; }
#div-1a { position:absolute; top:0; right:0; width:200px; }
#div-1b { position:absolute; top:0; left:0; width:200px; }

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait - what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

--------------------------------------------------------------------------

6. 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-1 {  position:relative;  height:250px; } 
#div-1a { position:absolute; top:0; right:0; width:200px; }
#div-1b { position:absolute; top:0; left:0; width:200px; }


--------------------------------------------------------------------------





7. 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-1a {  float:left;  width:200px; } 



----------------------------------------------------------------------------


8. 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-1a {  float:left;  width:150px; } #div-1b {  float:left;  width:150px; } 





------------------------------------------------------------------------------------




9. float columns with clear

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

#div-1a {  float:left;  width:190px; } #div-1b {  float:left;  width:190px; } #div-1c {  clear:both; } 

With so much negativity lately on this forum I thought it might be nice to post something helpful for everyone to learn from . If you need further help, let me know.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Great explanation brother :)

  • Pure awesomeness.  Thank you for explaining it out so that even I can understand it.  Half the time it's hit or miss with me.  lol

  • This reply was deleted.
    • NC for Hire

      thanks buddy! i look forward to some great posts by you Jamie...  if we all took a moment and shared something helpful, we could push away all of this awkward negativity...

  • Hi JFarrow,

    Nice, clear and helpful.  Thanks for your positive post!

    "TJ"

    • NC for Hire

      Aw... my pleasure guys and gals... i for one am ready for some positive tips to run through... glad i could help..

      TJ you tha man!

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

TJ @ jQueryHelp posted a discussion
Hi everyone! This is TJ, a Ning Apps developer for many years.  Looks like some Ning Creators are…
4 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"thank you very much I come from the times of this site now I put the photo, it was hard to survive…"
yesterday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"To do a border without the ridge and using dots you would just write it like this
border:13px…"
yesterday
Steve C posted a discussion
 I want to put ads above individual groups.Jen showed me how to put text above forum categories…
Wednesday
Rosas † Negras replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"I don't use file manager for photos, so if it's a photo I'm not interested even if after I close…"
Wednesday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I agree with you, but I want it rounded, on the square it gives no problem,this is an impossible…"
Tuesday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"It's because you are using the ridge as a border, to create the ridge the border property adds the…"
Tuesday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"I don't want to go below 13 px I know all would be ok but it's too logical"
Tuesday
Rosas † Negras replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
"#xg_masthead /*Top Image*/ {margin: auto;display: block;height:600px;width: auto…"
Tuesday
Bizz replied to Rosas † Negras's discussion
After many years of experience, I would like to know from you designers how I can solve this problem and a ridge
" show the css you have used for the border"
Tuesday
Rosas † Negras posted a discussion
Tuesday
Anam replied to George H. Compton IV's discussion
(TIP N3.0 & N2.0) let's hang some Christmas lights..CSS.. Happy holidays :-) updated 12-04-14
"OH MY GOD!!!! :D :D :D It worked!!!
 
I am so pleased. Thank you Bizz and Rosas for your help. I…"
Tuesday
More…

Meanwhile, you can check our social media channels