Responsive Design / Float-Problem

[nina20]

Hallo,

ich hoffe Ihr könnt mir weiterhelfen!

Ich erstelle gerade ein Layout, wo sich die Boxen und der Header verkleinern sollen. Funktioniert auch soweit. Dadurch, dass ich 2 Boxen nebeneinander liegen habe, springen die Boxen bei einer bestimmten Größe untereinander. Dies will ich jedoch verhindern!!! Ich habe lange gegoogelt, aber nichts dazu bzw. nichts sinnvolles gefunden. Wer kann mir da weiterhelfen?

Hier der HTML-Code:

	<div class='box1'>		<div class='headline'>			Textblock 1<br>		</div>						<div class='text'>						<img src='fisch.jpg'>			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 		</div>	</div>			<div class='box2'>		<div class='headline'>			Textblock 1<br>		</div>						<div class='text'>						<img src='fisch.jpg'>			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 		</div>	</div>			<div class='box1'>		<div class='headline'>			Textblock 1<br>		</div>						<div class='text'>						<img src='fisch.jpg'>			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 		</div>	</div>		<div class='box2'>		<div class='headline'>			Textblock 1<br>		</div>						<div class='text'>						<img src='fisch.jpg'>			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 		</div>	</div>

Und hier CSS:

body {background:#000000;
margin-top:0px;margin-left:0px;margin-right:0px;}

.wrapper {font-family:arial;font-size:15px;max-width:960px;;}

.header {max-width:100%;height:80px;background:#FE9A2E;}
.header_text {line-height:75px;font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;padding-left:5px;
}

.headline {font-size:34px;font-weight:bold;padding-left:5px;
}

.text {padding-left:5px;padding-bottom:5px;padding-right:5px;

}
.box1 {min-width:198px;max-width:478px;border: 1px solid #BDBDBD;min-height:135px;color:#000000;background:#E6E6E6;float:left;
}
.box2 {min-width:198px;max-width:478px;border: 1px solid #BDBDBD;min-height:135px;color:#000000;background:#E6E6E6;float:left;
}
img {padding-right:10px;width:106px;height:51px;float:left;
}

Nch hoffe ihr könnt mir weiterhelfen, bin schon echt verzweifelt!


Liebste Grüße,
Nina

 

[Trüffelkrieger]

Du gibst die Breite der Boxen einfach in Prozent an. Ein wenig unglücklich ist, dass du einen border hast, den man nur in fixen Werten definieren kann ... Vielleicht hilft dir da folgendes:

.box1, .box2{
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

Das bewirkt, dass das standard-Boxmodell von CSS verändert wird. Nun kannst du beiden Boxen 50% Breite geben, und es passt trotzdem der Border noch dazwischen, da dieser dann in die 50% "integriert" wird.

 

[nina20]

Unfassbar! Es funktioniert wirklich! Vielen lieben Danke. :) Ich saß da echt lange dran, dafür eine Lösung zu finden.
Danke!!!!