Frage zu einem Layout

J

joerg89

Grünschnabel
Hallo zusammen,

ich möchte gerne eine einfache Webseite realisieren, mit folgendem Layout (siehe angefügtes Bild).

Die drei zentrierten DIVs (Menü, Header, Inhalt) habe ich folgendermaßen in css definiert:

Code: 
#header{
		margin-top:5px;
		margin-left:auto;
		margin-right: auto;
		height:300px;
		width:820px;
	}
#menu{
		margin-top:2px;
		margin-left:auto;
		margin-right: auto;
		height:200px;
		width:820px;
	}
#inhalt{
		
		margin-top: 1px;
		margin-left: auto;
		margin-right: auto;
		height:600px;
		width:820px;
		
	}

Aber wie bekomme ich jetzt den DIV "Links" neben den Inhalts-DIV? Danke euch für eure Hilfe!
 

Anhänge

  • design.jpg
    design.jpg
    18,9 KB · Aufrufe: 20
Hallo. So wie ich es verstanden habe möchtest du zwei Div-Container nebeneinander anordnen. In deinem Fall gebe einfach dem "Links-Div" und dem "Inhalts-Div" die Eigenschaft float: left.
Damit beide Container unter dem Menu angezeigt werden musst du noch die Breiten anpassen, z.B. 410px, so nehmen beide den gleichen Raum ein. Natürlich kann man mit den Werten noch etwas experimentieren. Achso und wenn die beiden Divs auch zentriert sein sollen, dann musst du sie noch mit einem zusätzlichen Div umschließen.


Grüße

Dodo
 
Zuletzt bearbeitet:
Hallo dodo123,

danke für deine Antwort!

Ganz genau, ich möchte Links und Inhalt nebeneinander anordnen. Mein Problem ist aber, dass ich die "mittigen" Frames alle automatisch zentrieren lassen will (margin-left:auto; margin-right: auto;). Wenn ich jetzt beiden ein float:left gebe, dann sind die beiden Frames automatisch ganz links. Jetzt möchte ich ungern mit margin-left:XXXpx den DIV nach rechts verschieben, denn der Abstand ist ja dynamisch! Oder denke ich falsch?
 
HTML: 
<html>
<head>
<title>layout</title>
<style>

#links{
	position:absolute;
	width: 160px;
	height:100px;
	left:50%;
	margin-left:-573px;
	background-color:#0066FF;
	z-index:1000;
	margin-top:266px;
	}
#header{
        margin-top:5px;
        margin-left:auto;
        margin-right: auto;
        height:200px;
        width:820px;
		background-color: #0066FF;
    }
#menu{
        margin-top:3px;
        margin-left:auto;
        margin-right: auto;
        height:60px;
        width:820px;
		background-color:#0066FF;
    }
#inhalt{
        
        margin-top: 3px;
        margin-left: auto;
        margin-right: auto;
        height:600px;
        width:820px;
		background-color:#0066FF;
        
    }
	

</style>
</head>

<body>
<div id="links"></div>
<div id="header"></div>
<div id="menu"></div>
<div id="inhalt"></div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück