blackpickupline
Neues Mitglied
Hallo liebe Community,
ich habe ein Problem bei der Positionierung von zwei Elementen, die neben einem anderen, größeren Element untereinander angeordnet werden sollen.
Ich will die untere Box "Platzhalter" unter der Box "Kontakt" platzieren, leider wird diese ja mit float: left rechts daneben und mit clear: both wie im beispiel angezeigt. Das ganze wäre mir ohne position am liebsten.
Hat mir jemand dazu bitte eine Hilfe?
Vielen Dank im Voraus für Eure Hilfe! :)
Code:
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
</head>
<body>
<style type="text/css">
.display {
margin: 20px 20px 20px 20px;
}
.boxheader {
width: 215px;
background-color: #303C49;
color: white;
font-family: arial;
font-size: 12pt;
font-weight: bold;
padding: 5px 5px 5px 10px;
}
.boxcontent {
background-color: #white;
color: black;
font-family: arial;
font-size: 10pt;
text-align: left;
padding: 5px 10px 5px 10px;
}
.bigboxwrapper {
float: left;
width: 986px;
height: 580px;
border-style: inset;
border-width: 1px;
border-color: #303C49;
margin: 20px 10px 20px 10px;
}
.bigboxcontent {
background-color: #white;
color: black;
font-family: arial;
font-size: 10pt;
text-align: justify;
padding: 20px 20px 20px 10px;
}
.smallboxwrapper {
float: left;
width: 230px;
height: 290px;
border-style: solid;
border-width: 1px;
border-color: #303C49;
margin: 20px 10px 20px 10px;
}
</style>
<div class="display">
<div class="bigboxwrapper">
<div class="bigboxcontent">
<p>Text</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div> <!-- Ende bigboxcontent -->
<div class="bigboxcontent">
<p>Text</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div> <!-- Ende bigboxcontent -->
<div class="bigboxcontent">
<p>Text</p>
</div> <!-- Ende bigboxcontent -->
</div> <!-- Ende bigboxwrapper -->
<div class="smallboxwrapper"><div class="boxheader">Kontakt</div>
<div class="boxcontent"><p>Text</p>
</div> <!-- Ende boxcontent -->
</div> <!-- Ende smallboxwrapper -->
<div class="smallboxwrapper" style="clear: both;" ><div class="boxheader">Platzhalter</div>
<div class="boxcontent"><p>Text</p>
</div> <!-- Ende boxcontent -->
</div> <!-- Ende smallboxwrapper -->
</div> <!-- Ende display -->
</body>
</html>
ich habe ein Problem bei der Positionierung von zwei Elementen, die neben einem anderen, größeren Element untereinander angeordnet werden sollen.
Ich will die untere Box "Platzhalter" unter der Box "Kontakt" platzieren, leider wird diese ja mit float: left rechts daneben und mit clear: both wie im beispiel angezeigt. Das ganze wäre mir ohne position am liebsten.
Hat mir jemand dazu bitte eine Hilfe?
Vielen Dank im Voraus für Eure Hilfe! :)
Code:
<!DOCTYPE html>
<html>
<head>
<title>test2</title>
</head>
<body>
<style type="text/css">
.display {
margin: 20px 20px 20px 20px;
}
.boxheader {
width: 215px;
background-color: #303C49;
color: white;
font-family: arial;
font-size: 12pt;
font-weight: bold;
padding: 5px 5px 5px 10px;
}
.boxcontent {
background-color: #white;
color: black;
font-family: arial;
font-size: 10pt;
text-align: left;
padding: 5px 10px 5px 10px;
}
.bigboxwrapper {
float: left;
width: 986px;
height: 580px;
border-style: inset;
border-width: 1px;
border-color: #303C49;
margin: 20px 10px 20px 10px;
}
.bigboxcontent {
background-color: #white;
color: black;
font-family: arial;
font-size: 10pt;
text-align: justify;
padding: 20px 20px 20px 10px;
}
.smallboxwrapper {
float: left;
width: 230px;
height: 290px;
border-style: solid;
border-width: 1px;
border-color: #303C49;
margin: 20px 10px 20px 10px;
}
</style>
<div class="display">
<div class="bigboxwrapper">
<div class="bigboxcontent">
<p>Text</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div> <!-- Ende bigboxcontent -->
<div class="bigboxcontent">
<p>Text</p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div> <!-- Ende bigboxcontent -->
<div class="bigboxcontent">
<p>Text</p>
</div> <!-- Ende bigboxcontent -->
</div> <!-- Ende bigboxwrapper -->
<div class="smallboxwrapper"><div class="boxheader">Kontakt</div>
<div class="boxcontent"><p>Text</p>
</div> <!-- Ende boxcontent -->
</div> <!-- Ende smallboxwrapper -->
<div class="smallboxwrapper" style="clear: both;" ><div class="boxheader">Platzhalter</div>
<div class="boxcontent"><p>Text</p>
</div> <!-- Ende boxcontent -->
</div> <!-- Ende smallboxwrapper -->
</div> <!-- Ende display -->
</body>
</html>
