Boxen schieben sich untereinander

Status
Nicht offen für weitere Antworten.
C

cosmanova

Mitglied
Hallo :)

Habe folgendes Problem was ich nicht lösen kann:

Es ist eine rote Box (feste Breite) und eine grüne Box (variable Breite) nebeneinander. Eine blaue Box drunter.

Die grüne Box verlängert sich immer nach unten wenn ich den Browser bis zu einem bestimmten Grad kleiner mache. Wenn ich die rote Box länger mache (width: 600px) verschiebt sich die grüne Box komplett unter die Rote.

Ich möchte aber, dass die rote und grüne Box nebeneinander bleiben. Mit float: clear hat sich nix getan...

Wie kann ich das verschieben verhindern ?


Code: 
<html>
<head>
<title></title>
<meta name="author" content="aquina">

<style>
<!--

body{
margin: 0;
padding: 0;
}

.box1{
border: 1px solid red;
width: 500px;
float:left;
margin: 0;
padding: 0;
}

.box2 {
border: 1px solid green;
margin-left: 475px;
padding: 0;
}


.box3 {
border: 1px solid blue;
width: 950px;
}
-->
</style>
</head>
<body>

<div class="box1"> test</div>
<div class="box2">&#160</div>
<div class="box3">&#160</div>

</body>
</html>

Viele Grüße
Cosma
 
HTML: 
<html>
<head>
<title></title>
<meta name="author" content="aquina">
<style>
<!--
body{
margin: 0;
padding: 0;
}
.box1{
border: 1px solid red;
width: 500px;
float:left;
margin: 0;
padding: 0;
}
.box2 {
border: 1px solid green;
/* margin-left: 475px; <-- das ist vollkommen sinnfrei */
margin: 0;
padding: 0;
float: left;
}
.box3 {
border: 1px solid blue;
width: 950px;
}
-->
</style>
</head>
<body>
<div class="box1"> test</div>
<div class="box2">&#160</div>
<br clear="all">
<div class="box3">&#160</div>
</body>
</html>

nur so als Anmerkung:
wenn die 3. Box eh 950px breit ist, warum gibst du der 2. Box nicht eine Breite von 450px?
dann haben Box 1 und 2 zusammen die selbe Breite wie Box 3.

Oder du verrätst mir den Grund für die gewünschte variable Breite ^^
 
Außerdem fehlt eine Doctype-Angabe bei dir. Dies kann auch solche Fehler hervorrufen, da der Browser dann im Quirks-Modus läuft.
 
Hi,

bei mir verschieben sich die Boxen überhaupt nicht untereinander, wenn ich das Browserfenster skaliere. :confused:

[editpost]

Okay, wenn ich das Fenster extrem zusammenstauche, rutscht die grüne Box nach unten.

Abhilfe schafft da ein übergeordnetes Element, das mit einer Mindestbreite ausgestattet wird, damit das Layout nicht vollends zusammengeschoben werden kann.

Und da du einen großen Augenmerk auf die älteren IE-Versionen hast, sei darauf hingewiesen, dass sie die min-width-Eigenschaft nicht unterstützen, aber Stu Nicholls hierfür eine Lösung parat hat -> http://www.cssplay.co.uk/boxes/minwidth.html

[/editpost]

@aGeNET: Was ist bitte an margin-left:475px vollkommen sinnfrei?

Ohne diese Deklaration rutscht der "grüne" Inhalt nach links unter die rote Box, wenn er länger (höher) als der Inhalt in der roten Box ist.

Wenn du keine Ahnung von Floatumgebungen hast, dann halte dich mit deinen "sinnfreien" Kommentaren bitte zurück.
 
Maik hat gesagt.:
@aGeNET: Was ist bitte an margin-left:475px vollkommen sinnfrei?
Zum Vergrößern anklicken....

Ganz einfache Rechnung: box1 + box2 -> 500px + 475px = 975px
Die Box darunter soll nur 950px breit sein.

Jeder halbwegs vernünftige Webdesigner (ich will hier niemandem was unterstellen!) verwendet für seine Layouts eine maximale Breite von 996px wegen Scollbalken usw.

Deswegen ergab es für mich keinen Sinn.
 
Hier zeigt sich, dass du scheinbar tatsächlich keine Ahnung von Floatumgebungen hast, und was es mit der margin-left-Deklaration überhaupt auf sich hat.

Box2 soll Box1 mit einem linken Außenabstand von 475px umfliessen. Somit ergibt sich da auch keine Gesamtbreite von 975px.

Sinnigerweise sollte der margin-left-Wert nicht kleiner als die Boxenbreite sein, da die zu umfliessende Box ansonsten "unterwandert" wird, im vorliegenden Fall um 25px.

Und welche Breite der Autor für sein Layout wählt, sollte dir doch eigentlich auch so was von egal sein. :rolleyes:
 
So klein hatte ich mein Browserbild auch nich skaliert. Ich wusste erst gar nicht was sein Problem war :)

Nebenbei bemerkt, wenn ich ich mir die Besucherstatistik von meinen Seiten so anschaue, habe ich immer noch eine durchschnittliche Bildschirmauflösung der Besucher von 800x600 Pixel von 8,5%. Aber das sollte jeder selbst entscheiden.
Meiner Meinung nach hängt es auch stark vom Inhalt ab. Mehr junge Besucher, um so größer die Durchschnittsauflösung.
Aber da das ein ganz anderes Thema und wurde schon in unzähligen Threads im Netz besprochen.
 
Hallo :)

Alsooooooooo:

Mein Layout muss auch in älteren Browsern einigermaßen vernünftig aussehen, da unsere Kundschaft eher der Keine-Ahnung-User ist ;) Daher habe ich eine Grundbreite von 950px gewählt, weil sich dann der Inhalt in einem IE 5 bei 800x600 noch gut lesen lässt.

Warum ich der grünen Box keine feste Breite gebe:

Die rote Box symbolisiert eine Trennlinie vom oberen Menü zur unteren blauen Box, welche nochmals Menü und Inhalt enthält. Die rote Box (Trennlinie) hat die selbe Breite wie die blaue Box mit dem Inhalt = 950px.

Die grüne Box soll als Verlängerung der Trennlinie fungieren. Also wenn eine hohe Auflösung eingestellt ist, soll sich die Trennlinie über den gesamten Browser ausdehnen. Daher brauche ich eine variable Breite.

Bin für konstruktivere Lösungsvorschläge offen ;)

@soyo (bitte ihr - net sein Problem *g* )
padding: 0; habe ich in der Box2 stehen.

Habe auch das <style> und eine Doctype-Angabe - nur nicht mit hier rein kopiert...

@Maik
Daher habe ich die min-width-Eigenschaft bis jetzt vermieden. Aber das würde ja auch nicht bei meinem Problem helfen, oder ?

Die Trennlinie bestand zuerst aus nur 1 Box. Da ich aber das Problem hatte, dass diese wie unten (siehe Code) nicht komplett angezeigt wurde, wenn ich den Browser kleiner mache und zur Seite scrolle - dachte ich mir es muss doch dann mit 2 Boxen funktionieren ?


Trennlinie aus nur 1 Box:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type"/>
<style type="text/css">

<!--
body {
margin: 0;
padding: 0;
background: #f0f4f6;
}

.backbox {
border: 2px solid black;
margin-left: 15px;
padding: 15px 0px 15px 0px;
width: 950px;
height: 680px;

}

#topborder {
border: 1px solid black;
margin: 10px 0 0 15px;
width: 950px;
height: 15px;
font-size: 1px;
background: blue;
}

.topmenu {
border: 1px solid black;
margin: 0 0 0 15px;
width: 950px;
}

#stripline {
width: 99%;
border: 0px solid black;
padding:0px 0 2px 0;
margin-left: 7px;
background:transparent;
border-bottom:1px solid #0084A5;
}

#stripline p{
width: 99%;
padding:4px;
margin:0;
background:#e72c50;
border-top:1px solid #0084A5;
border-bottom:1px solid #0084A5;
}

-->

</style>
</head>

<body>

     <div id="topborder">
    		<span style="height: 1px"></span>
	</div>


	<div class="topmenu">
        <table width="100.1%" border="0">
         <tr>
	         <td class="tablewidth-ie5-1"align="center" width="200">&#160</td>
	         <td class="tablewidth-ie5-2" width="540" height="100" ><h1>INHALT</span></h1>
	         <td>
	            <ul class="contact">
	               <li><a href="" class="contact">Link 1</a></li>
	               <li><a href="" class="contact">Link 2</a></li>
	               <li><a href="" class="contact">Link 2</a></li>
	               <li><a href="" class="contact">Link 2</a></li>
	            </ul>
	         </td>
	      </tr>
	   </table>
	</div>

     <div id="stripline">
    		<p style="height: 1px"><img src="Bilder/pixel_rot.jpg"></p>
	</div>

<div class="backbox">

</div>

</body>
</html>


Vielen Dank schon mal.
 
Zuletzt bearbeitet:
Und wo ist jetzt der Kontext zum eingangs gezeigten Quellcode? :confused:

Und wieso bindest du den Dokumentheader zweimal in das Dokument ein?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type"/>
<style>
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>aquina Handel Ltd.</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type"/>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück