CSS Button soll komplette Breit füllen

darton

Lt. Junior Grade
Dabei seit
Okt. 2004
Beiträge
274
Button soll komplette Breite füllen

Hallo!
Ich habe ein simples CSS-Problem. Ich habe zwei Boxen, die nebeneinander stehen sollen, wobei die rechte Box ein Button ist. Die linke Box hat eine feste Breite und der Button soll dann einfach sich über die komplette Breite erstrecken. Ihr könnt euch ja mal diesen Code angucken:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <style type="text/css">
  body {
	margin: 0;
	padding: 0;	
  }
  
  box {
	
  }
  
  #rechts {
	width: 100%;
	float: right;
  }
  
  #links {
	width: 55px;
	border: 1px solid black;
	float: left;
  }
  </style>
</head>

<body>

<div id="box">

<div id="links">
fghgfgh
</div>

<input type="submit" id="rechts" value="Warenkorb" />

</div>

</body>
</html>
Der Button füllt jetzt zwar die ganze Seite, aber steht nicht neben der linken Box. Wie kriege ich das hin, dass der Button direkt daneben steht?
 
Zuletzt bearbeitet:

Znrl

Lieutenant
Dabei seit
Jan. 2008
Beiträge
571
Bspw.: du gibts ihm keine 100% width.

Float heißt nicht, dass es immer rechts oder links daneben ist. Das ist dynamisch. Gib dem Button mal 900px (je nach deinem Bildschirm) o.ä. als Breite und veränder das Browserfenster und schau dir an was passiert.
 
Zuletzt bearbeitet:

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Schritt 1: Werde dir klar darüber, was für ein "display" der Standardwert für input ist, wie sich welches "display" verhält und was du einstellen musst, um evtl. das erwünschte Verhalten zu erzielen.
 

Znrl

Lieutenant
Dabei seit
Jan. 2008
Beiträge
571
Das einfachste sind die guten alten Tabellen ...
Zumindest, kann man das ganze etwas moderner auch mit CSS display: table. Allerdings fehlt dir dann die IE7 und kleiner Unterstützung.
HTML:
<!DOCTYPE html>
<html>

<head>
    <title>TEST</title>
 <style type="text/css">

body {
margin: 0;
padding: 0;	
}

#rowone {
display:table-row;
}

#box {
display: table;
width: 100%;
}

#rechts {
display: table-cell;
width: 100%;
}

#rechts input {
width: 100%;
}

#links {
display: table-cell;
width: 55px;
border: 1px solid black;

}
</style>
</head>


<body>

<div id="box">
  <div id="rowone">
  <div id="links">
    fghgfgh
  </div>
  <div id="rechts">
  <input type="submit" value="Warenkorb" />
  </div>
  </div>
</div>

</body>

</html>
Ist das überhaupt das, wie dus willst?
 
S

Speedy.

Gast
Mit dem display-Attribut in CSS würde das auch mit zwei Zeilen Code gehen...
Stichwort inline und inline-block ;)
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Display:table? Das is einfach nur unpraktisch...
display:inline oder inline-block ist übrigens auch die falsche Antwort, da <input>-Elemente in modernen Browsern bereits als inline-block klassifiziert sind.
 
S

Speedy.

Gast
Wer sagt, dass ich mit dem display-Attribut den Button gemeint habe? Ich hatte es eigentlich auf den linken Container abgezielt, bei dem mit einem display: inline-block; der selbe Effekt wie mit float erzielt werden kann. Muss nur noch die Breitenangabe des Buttons angepasst werden, damit er die gewünschte Breite hat.
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
viel einfacher: beide Spalten auf display:block, etwas mit float:left rumspielen, Linke Spalte mit fester Breite, rechte Spalte mit Margin-Left >= der Breite der linken Spalte. Fertig...
 
Top