HTML/CSS Frage (noob)

Hier mein Problem:
(bisschen schwer zu erklären):
Ich habe mithilfe von CSS meine website in verschiedene Teile unterteilt.
(ich habe quadrate mit dieser div-klassenvereinbarung erzeugt die dann meine infos enthalten sollen. manche machen das auch mit frames oder tabellen).
nun bleiben die quadrate immer dicht aneinander, egal wohin ich sie positioniere.

Frage:
Gibt es einen Befehl der für einen mindestabstand zwischen zwei objekten sorgt.
"padding" wirkt leider nur für alles innerhalb der kästchen.

Bin für jede hilfe dankbar. Wenn ich auf einem falschen weg bin sagt es mir ruhig.

 

http://www.css4you.de

 

margin


.

 

mit margin ***** das irgendwie nicht so wie ich mir das vorstelle.

Ich habe mal ein kleines bild zur darstellung meines problems gemacht.
Ich wäre wirklich toll wenn ihr mir da helfen könntet,
denn irgendwie steck ich da fest.

danke für die css hilfeseite. sieht wohl aus als wäre ich da auch gut aufgehoben.

 

Poste mal den CSS-Teil der Seite.

 

ok ich habs mit margin hinbekommen.
das rätsels lösung war margin-top, margin-left, margin-right......

Jedoch hab ich jetzt das Problem das der IE meine seite "korrekt" anzeigt, beim FF hingegen wirkt alles ein wenig verzerrt.

hier der CSS anteil.

Code:

<style type="text/css">
#fullFrame{
position:absolute;
top:10px;
left:0px;
width:640px;
height:100%;
padding:0px;
margin:10px;
border:4px solid #000EEE;
}
#headArea{
position:absolute;
top:0px;
width:100%;
height:130px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#leftArea{
position:absolute;
left:0px;
width:140px;
height:200px;
padding:10px;
margin-top:133px;
margin-left:2px;
border:4px solid #EE0000;
}
#rightArea{
position:absolute;
left:140px;
width:485px;
padding:10px;
margin-top:133px;
margin-left:4px;
margin-right:30px;
border:4px solid #0000EE;
}
a:link {color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited {color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:hover {color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active {color:#0000EE; background-color:#FFFF99; font-weight:bold; }
a:focus {color:#00AA00; background-color:#FFFF77; font-weight:bold; }
</style>

mit fullFrame meine ich den Rahmen der alles umfasst(wie Bilderrahmen).

 

Ich tippe mal auf das "padding". Die Browser interpretieren dies unterschiedlich bezogen auf die Höhe und Breite. Würgaround: padding weg lassen und ein weiteres <div> mit den entsprechenden margin-Werten "hineinschachteln".

 

ja ich habs geschafft.
es lag daran das ich aber scheinbar auch der IE das Box-Modell nicht ganz verinnerlicht hatten.
Nach dem einfügen eines XHTML1.1 Doctypes war jedoch das Problem behoben.

Danke für eure hilfe.