Absolute Positioning
The normal behavior of the browser (for English) is to read the document from left to right and top to bottom. This is referred to as document flow. In the normal flow, each block element sits on a new line beneath the previous block element, and each inline element sits beside each previous inline element. In other words, the normal flow of a page is one long document with items stacked down the page. An element can be removed from that normal flow with the CSS properties position or float to create layouts with columns.
There are several concepts to understand regarding absolute positioning. An absolutely positioned element is removed from the document flow and positioned with regard to its nearest positioned ancestor.
Relative positioning does not remove an element from the normal document flow.
<div id=”nav”>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Balloon Facts</li>
<li>Balloon Fiesta</li>
<li>Balloon Museum</li>
</ul>
<!– end of the nav div –>
</div>
<div id=”content”>
<h2>Floating on Air </h2>
<p><img src=”threeballoon.jpg” alt=”Three Balloons” width=”400″ height=”300″ /
>Welcome to Far and Wee Balloons, where your dreams of floating on air can come
true. We design and make hot air balloons for every use. Our balloons will give
you a magical ride over country, mountains, and ocean.</p>
…snip…
</div>
#container {
width: 700px;
background: #FFFFFF;
position: relative;
margin: 0px auto;
}
#nav { width: 175px; position: absolute; left: 10px; top: 165px; }Hope this will help for positioning div'sHappy Coding.
Comments are closed.