Positioning of a DIV Box: Float and Clear Float

One of the reasons I did not use DIV with CSS as the layout at the beginning was that I did not know how to position the DIV boxes properly. I could use "float" property in the CSS stylesheet to place a DIV element to the left or to the right. However if I added another DIV element below the floated elements, the newly added element would not be at the place that I wanted it to be. Are you encountering the same issue right now? If so, maybe you made the same mistake I did.

The default display format for DIV elements is "block" which means the DIV elements are laid out vertically, starting at the top. If we want two DIV elements side by side, we can add a "float" property to the elements. This property specifies whether an element should float (to the left or to the right) or not. If so, the floated element will be shifted to the left or to the right as far as it can go depending on what value we assign to it. Now if we want to add another DIV element below these floated elements, we might forget to do one thing: adding the "clear" property to the newly added element.

This "clear" property specifies which sides of an element cannot be adjacent to any floated elements. In this case, we should apply "clear:both" property to the newly added element so that it will not wrap around any floated elements and instead it will go right below them. So the key here is: after applying the floats, make sure you CLEAR them. Good luck!

Table Layout vs. Div with CSS Layout

A few months ago, I tried to create my first website. Since my budget was very tight, I had to do everything myself, designing the web pages and writing the codes. Although I had some programming experience before, I had no knowledge in this web design area. Thanks to internet, I can learn everything free online.

After reading a few materials about HTML, I started to write my own for my first web page. There were two options for the layout: table based layout and Div based with CSS layout. At that time "Div" and "CSS" were totally strangers to me. On the contrary, "table" is a very familiar name. So I decided to use table layout for my first try. I was wrong.

I was a web newbie and an absolutely amateur "designer". So it is not hard to imagine how "unprofessional" my web pages looked like. Two months later, I tried to redesign my web pages. It was really a pain. Simply speaking, the modifications to the codes were tedious even if I just tried to insert a cell in the table. Fortunately I have gained some knowledge of Div and CSS in these two months and felt that it would be easier to re-write everything from scratch by using Div with CSS layout. I was right.

The Div with CSS layout is kind of like separating content and the presentation layout into two different parts. The advantage is that you can concentrate on the content first while writing the HTML codes and worry about the web page presentation design later in a separate CSS stylesheet. It is just a lot more flexible and easier to make changes to a stylesheet. Also since the stylesheet can be stored in the cache at the client side if it has visited the same page before, it is faster to download the web page and therefore a better user experience.

If you are a newbie in this web design area as I was a few months ago and have no knowledge in HTML at this moment, you might not understand what I am talking about. But don't make the same mistake as I did before. Use Div with CSS layout for your first website and you will not regret.

Privacy Policy for web-newbie.blogspot.com

At web-newbie.blogspot.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by web-newbie.blogspot.com and how it is used.

Log Files

Like many other Web sites, web-newbie.blogspot.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons

web-newbie.blogspot.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie

• Google, as a third party vendor, uses cookies to serve ads on your site.


• Google's use of the DART cookie enables it to serve ads to the users based on their visit to your sites and other sites on the Internet.


• Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. These third-party ad servers or ad networks use technology to the advertisements and links that appear on web-newbie.blogspot.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and/or to personalize the advertising content that you see.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.