Hey Leute ich hoffe ihr könnt mir weiterhelfen ich bin noch recht neu hier habe aber gleich ein Problem undzwar habe ich hier eine ganz schöne beispielseite ich hoste glecih mal den HTML sowie CSS Code 
Mein problem ist das ich einfach rechts von diesem Wrapper-Div-container einen euen Navi-Div-Cotainer einfügen möchte, dies habe ich einfach mal gemacht nur bekomme ich diese jetzt nciht nebeneinander ich kann zwar beide div container anzeigen lassen auch einen rechts ausrichten und einen links aber das problem ist dann das die untereinander sind also der eine ist oben link der andere unten rechts :S Wie bekomme ich die direkt nebeinanderne ?
Ich habe schon mal das Forum hier durchsucht und bin darauf gestoßen das man beim einem Container margin-left:20% und bei dem anderen margin-right:79% benutzen sollte aber das klappt hier irgendwie nicht könnt ihr mir sagen wodran das liegen könnte ? :S
Grüße Max
HTML:
[code]
<title>★ Lorem ipsum dolor ★</title>
<meta name="keywords" content="Stichworte" />
<meta name="copyright" content="Urheberrecht" />
<meta name="author" content="Autor" />
<meta name="description" content="Beschreibung" />
<meta name="language" content="de-de" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="./style/style.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="./style/jquery.fancybox.css" charset="utf-8" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="./style/ie-style.css" charset="utf-8" />
<![endif]-->
<script type="text/javascript" src="./script/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="./script/script.js" charset="utf-8"></script>
★ Lorem ipsum dolor ★
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Listenpunkt 1: Lorem ipsum dolor sit amet
- Listenpunkt 2: Lorem ipsum dolor sit amet
- Listenpunkt 3: Lorem ipsum dolor sit amet
- Listenpunkt 4: Lorem ipsum dolor sit amet
- Listenpunkt 5: Lorem ipsum dolor sit amet
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS:
[code]/-----------------------------------------------------/
/----------------------- Haupt -----------------------/
/-----------------------------------------------------/
-
{
margin: 0;
padding: 0;
border: 0 none;
}
body {
background: #909092 url('./../layout/background.png') repeat-x;
}
#wrapper {
width: 600px;
margin: 0 auto;
padding: 30px 0 0 0;
}
#content {
background: #E7E7E8;
border: 1px solid #fff;
border-radius: 25px;
/* proprietär */
-khtml-border-radius: 25px; /* ältere Safari-Versionen, Konqueror */
-moz-border-radius: 25px; /* Firefox */
-webkit-border-radius: 25px; /* Safari */
/* proprietär */
box-shadow: 100px 0 50px #ccc;
/* proprietär */
-moz-box-shadow: 0 0 50px #ccc; /* Firefox */
-webkit-box-shadow: 0 0 50px #ccc; /* Safari */
/* proprietär */
margin: 30px 0 0 0;
padding: 30px 30px 12px 30px;
}
/-----------------------------------------------------/
/--------------------- Schrift -----------------------/
/-----------------------------------------------------/
body {
color: #909092;
font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 100%;
}
a {
color: #2a2a2a;
text-decoration: none;
}
a:hover, a:focus {
color: #d59935;
}
h1 {
color: #fff;
text-align: center;
font-weight: normal;
}
h2 {
font-size: 1.125em;
font-weight: normal;
line-height: 1.4em;
margin-bottom: .3em;
}
h3 {
font-size: .813em;
font-weight: bold;
line-height: 1.4em;
margin-bottom: .2em;
}
#content p,
#content li {
font-size: .813em;
line-height: 1.5em;
margin-bottom: 1.4em;
}
#content li {
margin-bottom: .2em;
}
/-----------------------------------------------------/
/----------------------- Teil ------------------------/
/-----------------------------------------------------/
#content .teaser {
border: 5px solid #fff;
border-radius: 5px;
/* proprietär */
-khtml-border-radius: 5px; /* ältere Safari-Versionen, Konqueror */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
/* proprietär */
margin: .3em 15px 5px 0;
display: block;
float: left;
}
#content .teaser img {
display: block;
}
#content ul {
margin: 0 0 1.4em .9em;
}
#content .left {
width: 45%;
float: left;
}
#content .right {
width: 45%;
float: right;
}
/-----------------------------------------------------/
/---------------------- Detail -----------------------/
/-----------------------------------------------------/
/-----------------------------------------------------/
/--------------------- CSS-Hacks ---------------------/
/-----------------------------------------------------/
.clearfix:after,
#content .columns:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}[/code]
