New to CSS Postioning

Hi,

I am new to CSS positioning. I am currently using tables for positioning.

If you look at http://www.seroundtable.com/ how do they position each text area and advert in its place?

I think it is CSS coding. But how do I write the CSS and the HTML to position it in a particular position?

In particular, how do I get things positioned next to each other? I know if there are two lines of text:

<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>

You can do this to get them next to each other:

h2.pos_top
{
position:relative;
top:-75px;
width:300px;
}

h2.pos_right
{
position:relative;
left:350px;
width:400px;
}

Is there not an easier way??! My way is like Tetris or like a Jigsaw Puzzle!?!

I am using Dreamweaver.

Hope you can help,

Matt.

There certainly is. (That would be a poor way to position things.)

On the page you linked to, there is a series of div that have a set width and float: left. E.g.

div {
width: 300px
float: left;
}

There are other methods, such as display: inline-block instead of float: left, but float is the more common method.

I think you are talking about sections (http://www.seroundtable.com/). I hope It will be helpful for you:-

  1. We have to define container class (float, width, height….)

  2. Define two more text area (content space) left container and right container for your main container.

  3. For both Left and Right Container define margin, padding, color, width, height, line-height and float.

Note:- Always code float:left for left container and float:right for right container.

  1. Container class and container class for left, right will be using 3 times in Div for defining the sections.

For Example:

<div class=”container”>

         &lt;div class=&#8221;left-container&#8221;&gt;

<h3> </h3>

<p><span> Enter Text</span></p>

</div>

<div class=”right-container”>
<h3> </h3>

<p><span> Enter Text</span></p>

</div>

</div>

Ralph M,

This does not work:

h3.pos_right {
width: 300px
float: left;
}

with

<h3 class="pos_right">this is some text</h3>
<h3 class="pos_right">this is some text</h3>

Am I missing something? I want them next to each other.

Matt.

It is always good practice, highly recommended and ever so simple to use the w3.org Free validation service. It will minimise frustrations when checking your pages in different browsers:

http://validator.w3.org

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Engine Roundtable ::: The Pulse Of The Search Marketing Community</title>
<style type="text/css" media="all">
  body   {font-size: 0.84em; line-height: 1.42em;}
  div    {outline: dotted 4px #f00;}
  h3 {font-size: 1.5em; margin-bottom: 0 0 0 1em;}
  
  .logo {max-width: 177px; margin: 0 0 0 1em;}
  .add  {max-width: 728px; margin: 0 0 0 3em;}

  .logo2{max-width: 177px; position: relative; top: 0em; left: 1em}
  .add2 {max-width: 728px; position: relative; top: 0em; left: 4em}
  
  .logo3{max-width: 177px; float: left;  margin: 0 0 0 1em;}
  .add3 {max-width: 728px; float: right; margin: 0 0 0 3em;}
  
  .bdr  {border: outset 9px #f9f;}
  .bg1  {background-color: #fff;}
  .bg2  {background-color: #fcf;}
  .bg3  {background-color: #cfc;}
  .bg4  {background-color: #ff9;}
  .bg5  {background-color: #9ff;}
  .mga  {margin: 4.2em auto;}
  .w88  {width: 1000px}
  .hhh  {display: none;}
  }
</style>
</head>
<body>
  
  <div class="w88 mga bg3" style="min-height: 120px; padding-bottom: 1em;">
    <h3>Just using margins </h3>
    <img class="logo bg1" src="http://www.seroundtable.com/images/logo.png" alt="#" />
    <img class="add bdr"  src="http://pagead2.googlesyndication.com/simgad/16839838453435327144"  alt="#" />
  </div>

  <div class="w88 mga bg4" style="min-height: 120px; padding-bottom: 1em;">
    <h3>Position:relative and fixed top and left positions </h3>
    <img class="logo2 bg1 " src="http://www.seroundtable.com/images/logo.png" alt="#" />
    <img class="add2 bdr"  src="http://pagead2.googlesyndication.com/simgad/16839838453435327144"  alt="#" />
  </div>

  <div class="w88 mga bg5" style="min-height: 120px; padding-bottom: 1em;">
    <h3>Floats and margins</h3>
    <img class="logo2 bg1 " src="http://www.seroundtable.com/images/logo.png" alt="#" />
    <img class="add2 bdr"  src="http://pagead2.googlesyndication.com/simgad/16839838453435327144"  alt="#" />
  </div>

</body>
</html>

Duh, typo on my part (I had a wriggly puppy on my lap.) I missed a semicolon at the end of the first declaration:

h3.pos_right {
width: 300px[COLOR="#FF0000"];[/COLOR]
float: left;
}