Table umsteiger, Div abstände

Hallo,

Zu erst einmal ein Bild um meine Frage besser zu beschreiben.

021de35d611900e4f16e45a519253616-seiten_problem

Der Rote kasten ist ein TD in einer Table mit einer breite von 680 Pixeln.

Wie im Quelltext unten gezeigt, ist der Grüne Kasten ein DIV der neben einem Blauen kasten auch ein DIV liegt. Als Abstand vom rand muss ich 230 angeben, 200 der Blaue kasten ,15 sein Linker rand Abstand und die verbleibenden 15 sind der Abstand zwischen Blauem kasten und Grünem kasten.

Gibt es auch eine Möglichkeit nur den relativen Abstand zur rechten kante des Blauen Kastens anzugeben, also 15?

HTML Code

<Div Class="Ueberschrift">  
  Linksammlung
</Div>

<div style="background-color:#c0c0c0;height:1px;"></Div>  

<Div Class="InhaltzuUeberschrieft" style="float:left;margin-left:15px;width:200px;">  
	<FORM action=""><SELECT onchange="location = this.options[this.selectedIndex].value" style="width: 200px;" size="1">  
	<option selected value="/index.php?riu=linksamlung&amp;id1=0">Hauptkategorie:</option>  
	<option value="/index.php?riu=linksamlung&amp;id1=1">Computer</option>  
	</SELECT></form>
</Div>

<Div Class="InhaltzuUeberschrieft" style="margin-left:230px;">  
	<FORM action=""><SELECT onchange="location = this.options[this.selectedIndex].value" style="width: 200px;" size="1">  
	<option selected value="/index.php?riu=linksamlung&amp;id1=0"></option>  
	</SELECT></form>
</Div>

<div Class="InhaltzuUeberschrieft" style="background-color:#c0c0c0;height:1px;clear:left;"></Div>  

CSS Code

.Ueberschrift {
              margin:5px;
              font-family:Arial,sans-serif;
              font-size:20px;
              font-weight:bold;
              color:black;
              }

.InhaltzuUeberschrieft  {
                        margin-top:10px;
                        }

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 96468

Url: https://administrator.de/forum/table-umsteiger-div-abstaende-96468.html

Ausgedruckt am: 27.04.2025 um 00:04 Uhr

2 Kommentare

Neuester Kommentar

Nabend,

etwa so !? :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
   "http://www.w3.org/TR/html4/strict.dtd">  
<html>
  <head>
    <style type="text/css">  
      <!--
        #main  { border:1px solid #ff0000; width:680px; height:400px; margin:auto; padding-top:15px; }
        #blau  { border:1px solid #0000ff; width:200px; float:left; margin-left:15px; }
        #gruen { border:1px solid #00ff00; width:200px; float:left; margin-left:15px; }
        #other { border:1px solid #ffff00; width:200px; }
        
        .floatstopper { clear:left; }
      -->
    </style>
  </head>
  <body>
  
    <div id="main">  
    
      <div id="blau">  
        blau
      </div>
    
      <div id="gruen">  
        gr&uuml;n
      </div>
      
      <span class="floatstopper">&nbsp;</span>  
      
      <div id="other">  
       other
      </div>
    
    </div>
  
  </body>
</html>

~Arano

(Habe es im Firefox gemacht, kann leider nicht sicher sagen wie es in den anderen aussieht !? )

Hallo,

Danke mit deinem Code konnte ich mir Folgendes Bauen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
   "http://www.w3.org/TR/html4/strict.dtd">  
<html>
  <head>
    <style type="text/css">  
      <!--
        #main  { border:1px solid #ff0000; width:680px; height:400px; margin:auto; }
        .td { border:1px solid #0000ff; width:auto; float:left; }
        .tr { clear:left; }
	.abstandHV { margin-top:15px; margin-left:15px; }
      -->
    </style>
  </head>
  <body>
  
    <div id="main">  
    
      <div class="tr td abstandHV">  
        Kasten NR.1
      </div>
    
      <div class="td abstandHV">  
        Kasten NR.2
      </div>

      <div class="td abstandHV">  
        Kasten NR.3
      </div>

      <div class="td abstandHV">  
        Kasten NR.4
      </div>

      <div class="tr td abstandHV">  
       Kasten NR.6 in neuer Zeile
      </div>
    
    </div>
  
  </body>
</html>