• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Div Container nebeneinander

Azagio

Neues Mitglied
Hey zusammen,
Ich versuche momentan 2 Div-Container nebeneinander zu positionieren. Mir ist bewusst, dass es zu diesem Thema schon massig Threads gibt, aber ich krieg's irgendwie doch nicht hin.

HTML Code :
Code:
<html>
<head>
<title>blablub</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id =header>                            <!--erstellt div-container "header"-->   
<ul id =navigation>                            <!--erstellt eine unformatierte Liste namens navigation-->           
<li><a href="">1</a></li>            <!--erstellt die einzelnen Listenelemente-->   
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</div>
<div id = content>
<div id = bild>
</div>
<div id = text>
</div>
</div>
</body>
</html>

CSS:
Code:
body {
background-color:lightblue;
}

#header {
background-color:blue;
height:80px;
width:80%;
margin-left:auto;
margin-right:auto;
margin-top:3%;
text-align:center;
}

#content {
background: rgba(255, 255, 255, .5);
width:80%;
height: 500px;
margin:0px auto;
clear: both;
}

#bild {
float:left;
width:50%;
height:100%;
border: 1px solid black;
padding:0;
}

ul#Navigation {
    margin: 0; padding: 0.8em;
    text-align: center;
}
ul#Navigation li {
    font-size:50px;
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
    border:1px solid black;
}

#text{
height:100%;
width:50%;
border:1px solid black;
float: right;
padding:0;
}

Die 2 div-Cotnainer die nebeneinander sein sollen heissen "bild" und "text". Beide befinden sich im div-Container "Content". Ich habe das ganze versucht mit float zu lösen aber irgendwie bekomm ich's nicht hin.

Für Ratschläge wär ich sehr dankbar :) (Bin noch Anfänger, geht also nicht ganz zu hart ins Gericht mit mir ;) )
 
Werbung:
Hallo.

Die Breite von #bild und #text beträgt zusammengerechnet mehr als 100%.
Ändere das mal und versuche ob es dann klappt.

Gruss
Elroy
 
Werbung:
Zurück
Oben