problem mit boxen

ich hab ein kleines problem beim css mit boxen:
hier der css code:

div {
    padding: .5em;
    margin: 0;
    border: 0px solid black;
    color: black;
    text-align: center;
    }

    #box1 {
      background-color: #e6e6fa;
      float: center;
      margin: 5px;
      border: 2px solid black;
      }

    #box2 {
      background-color: #e6e6fa;
      float: center;
      text-align: left;
      margin: 5px;
      border: 2px solid black;
      }

    #boxlinks {
      background-color: #e6e6fa;
      height: 1000px;
      float: center;
      margin: 5px;
      border: 2px solid black;
      }

    #boxlinks1 {
      float: center;
      margin: 5px;
      height: 1000px;
      border: 2px solid black;
      }

    #boxlinks2 {
      float: center;
      margin: 5px;
      border: 2px solid black;
      height: 160px;
      }

    #boxlinks2_1234_1 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_2 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_3 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

    #boxlinks2_1234_4 {
      float: center;
      margin: 5px;
      width: 130px;
      height: 80px;
      border: 2px solid black;
      }

hier der php teil:

<div id="boxlinks">
<p><b><font size="+2">Links</font></b></p>
<div id="boxlinks1">
<p><b>Ergebnisdienst und Homepage des Kreises Karlsruhe:</b></p>
<center><table width="90%" border="0" cellpadding="4" cellspacing="0">
 <tr>
  <td><center><a href="http://ttvbw.click-tt.de/" target="_blank">Ergebnisdienst click-TT Baden-W&uuml;rttemberg</a></center></td>
  <td><center><a href="http://www.ttkreis-karlsruhe.de/" target="_blank">Homepage des Kreises Karlsruhe</a></center></td>
 </tr>
</table></center>
<hr noshade size="2">
<p><b>Karlsruher TT-Vereine mit Homepage:</b></p>
<div id="boxlinks2">
<center><table width="90%" border="0" cellpadding="4" cellspacing="0">
 <tr>
  <td><center><a href="http://tsgtischtennis.ts.funpic.de/TTtsgBlankenloch.html" target="_blank">TSG Blankenloch</a><br><a href="http://tsgtischtennis.ts.funpic.de/TTtsgBlankenloch.html" target="_blank"><img src="bilder/links/blankenloch.gif"></a></center></td>
  <td><center><a href="http://www.vsvtt.de/" target="_blank">VSV B&uuml;chig</a><br><a href="http://www.vsvtt.de/" target="_blank"><img src="bilder/links/buechig.gif"</a></center></td>
  <td><center><a href="http://www.tvbusenbach-tt.de/" target="_blank">TV Busenbach</a><br><a href="http://www.tvbusenbach-tt.de/" target="_blank"><img src="bilder/links/busenbach.gif"</a></center></td>
 </tr>
</table></center>
<div id="boxlinks2_1234_1">Test 1</div>
<div id="boxlinks2_1234_2">Test 2</div>
<div id="boxlinks2_1234_3">Test 3</div>
<div id="boxlinks2_1234_4">Test 4</div>
</div>
<br>
<?php
include "aktualisierung.php";
?>
</div>
</div>

was ist dass problem? die boxen #boxlinks2_1234_1 - #boxlinks2_1234_4 sind untereinander, ich möchte sie aber nebeneinander haben.

wie mache ich dies???

danke

Habe ähnliches Problem,

aber habe nur float left, float right verwendet und habe auch übergeordnetes div. Leider ist das horizontal mittig angeordnete div (hat keinen float Befehl) keine feste Breite (soll sich anpassen), also wie soll ich dem übergeordneten div klarmachen wie breit es sein soll? Mein Footer soll dabei am unteren Rand des Browserfensters bleiben.

html,
body
{
margin: 0px auto;
padding: 0;
height:100%;
width: 100%;
background-color: #FF9900;
background-image: url(images/trentatre.gif);
background-repeat: repeat;
border: solid #000033 2px;

}


#container
{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
margin: auto;
border: solid #33CCFF 2px;

}

#header
{
margin:0px 0px 10px 0px;
padding: 0;
height: 60px;
border: solid #FF33FF 2px;
}

#body
{
min-height: 100%;
height: auto !important;
height: 100%;
color: #333;
line-height: 130%;
margin: 0 auto 60px auto;
padding: 0px 10px 0px 10px;
border: solid #00FF33 2px;
}

#leftnav
{
float: left;
width: 150px;
margin:0px 0px 10px auto;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}

#content
{
margin: 0px 323px 10px 180px;
padding: 10px;
min-width: 10em;
max-width: 20em;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */

}

#rightnav
{
float: right;
width: 125px;
margin: 0px auto 10px 10px;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}

#rightnav2
{
float: right;
width: 125px;
margin: 0px 0px 10px 10px;
padding: 10px;
border: ridge #FFC100 4px;
background-color: #fff;
color: #000;
filter:alpha(opacity=65); /* IE */
opacity:0.65; /* allgemein */
-moz-opacity:0.65; /* Mozilla */
-khtml-opacity:0.65; /* KTHML */
-opera-opacity:0.65; /* Opera */
}


#footer
{
border: solid #FF33FF 2px;
position: absolute;
bottom: 0;
height:60px;   /* Height of the footer */
width: 100%;
}

das HTML:

<body>
<div id="container">
    <div id="header">
        header
    </div>
    <div id="body" class="clearfix">
        <div id="leftnav" >
            <p>
            <h2>leftnav</h2>
            Lorem ipsum dol or s it amet, con sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.  erci tation ullamcorper suscipit lobortis nisl ut  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molest
            </p>
        </div>
        <div id="rightnav">
            <p>
            <h2>rightnav</h2>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
            </p>
        </div>
        <div id="rightnav2">
              <p>
              <h2>rightnav2</h2>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.  nt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostr
              </p>
        </div>
          <div id="content">
            <h2>content</h2>
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
            </p>
            <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse   nt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
            </p>
        </div>
    </div>
    <div id="footer">
        Footer
    </div>
</div>
</body>
</html>

Danke, funktioniert halbwegs, probiere morgen die verschiedenen Einstellungen dazu, inbesondere insgesamt mit em-Werten, um ein Optimum hinzubekommen.

Habe Forum gleich mal gebookmarket und werde öfters vorbeischauen - vielleicht kann ich ja auch etwas helfen.

Gute Nacht dann.