Visual Studio 2010 Tables-less web design

This article teaches you how to create table less design using div. I have explained each css positions using pictures than more of words. Each picture is the output of the code done in Visual Studio 2010. (CLICK ON THE IMAGES TO NEW TAB TO VIEW THEM CLEARLY)

1) position:static - divs lying one below other - see (picture1-static)
Static positioned elements are not affected by the top, bottom, left, and right properties,they are always positioned according to the normal flow of the page.HTML elements are positioned static by default.


2) position:absolute - positioned from co-ordinates of the browser - see (picture2-absoulte)
An absolute position element is positioned relative to the first parent element that has a position other than static.


3)position:relative - postioned to its adjacent divs. - see (picture3 - relative)
A relative positioned element is positioned relative to its normal position.


4) When you float an element it becomes a block box. This box can then be shifted to the left or right on the current line. The markup options are "float: left", "float: right" or "float: none".
Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

without 'float' - see (picture4-without float)


with float: - see (picture5-with float)



No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: