✔ Vier div container je zwei nebeneinander

[StefanR]

Hallo, ich steh irgendwie aufm Schlauch. Seh den Wald vor lauter Bäumen net mehr. Habe vier Contentboxen, die in divs eingebaut sind, so nun möchte ich gerne das zwei nebeneinander sitzen und halt jeweils zwei unter einander. Nun weiß ich aber leider nicht wie ich das dem übergeordnetem Div Container klar mache!

Jemand ne Idee?

 

[Gumbo]

Weise den Elementen einfach die Hälfte der verfügbaren Breite zu.

 

[Maik]

1. Lösungsvorschlag:

div.leftCol
{
float: left;
background: #efefef;
clear: left;
}

div.rightCol
{
float: right;
background: #efefef;
clear: right;
}

<div class="leftCol">leftCol</div>
<div class="rightCol">rightCol</div>

<div class="leftCol">leftCol</div>
<div class="rightCol">rightCol</div>

2. Lösungsvorschlag

div.leftCol
{
float: left;
background: #efefef;
}

div.rightCol
{
float: right;
background: #efefef;
}

div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

<div class="leftCol">leftCol</div>
<div class="rightCol">rightCol</div>

<div class="clear">&nbsp;</div>

<div class="leftCol">leftCol</div>
<div class="rightCol">rightCol</div>

 

[StefanR]

Danke für eure Antworten aber irgendwie will das immer noch nicht ganz. Hiermal der Code bisher:

<div class="leftcontent"><img src="/images/ecke_ol.gif" alt="corner_top_left" class="left" height="24" width="24" /><img src="/images/ecke_or.gif" alt="corner_top_right" class="right" height="24" width="24" /><div class="contentboxtopline"></div><div class="clearfix contentbox">Hallo</div><div class="designelement" style="clear: both;"> <img src="/images/ecke_ul.gif" alt="corner_bottom_left" class="left" height="24" width="24" /> <img src="images/ecke_ur.gif" alt="corner_bottom_right" class="right" height="24" width="24" />
<div class="contentboxbottomline"></div></div>
<div class="rightcontent"><img src="/images/ecke_ol.gif" alt="corner_top_left" class="left" height="24" width="24" /><img src="/images/ecke_or.gif" alt="corner_top_right" class="right" height="24" width="24" /><div class="contentboxtopline"></div><div class="clearfix contentbox">Hallo</div><div class="designelement" style="clear: both;"> <img src="/images/ecke_ul.gif" alt="corner_bottom_left" class="left" height="24" width="24" /> <img src="images/ecke_ur.gif" alt="corner_bottom_right" class="right" height="24" width="24" />
<div class="contentboxbottomline"></div></div>

und hier die styles:

div.leftcontent {
	width: 280px; 
	min-height: 205px; 
	padding-top: 5px;
	float: left;
	clear: left;
}
div.rightcontent {
	width: 280px; 
	min-height: 205px; 
	padding-top: 5px;
	float: right;
	clear: right;
}

 

[Maik]

Für das DIV.designelement fehlt noch das schliessende </div>, was zu dem Darstellungsfehler führt.