✔ Ausrichtung von Divs

  • Themenstarter Themenstarter Marico
  • Beginndatum Beginndatum
M

Marico

Hallo,
ich habe folgendes Problem:

Ich habe ein Div in diesem sollen sich links, nebeneinander drei weitere befinden. Anschließenssoll eine "Lücke" mit variabler Größe folgen (ob freier Platz oder ein weiteres Div ist egal). Ein letztes Div soll am rechten Rand des Übergeordneten sein.
Per float kann ich die Divs zwar nebeneinander anordnen allerdings nur mir einer festen Breite...
Gibt es eine Möglichkeit das ganze wie oben beschrieben darzustellen?

zur Veranschaulichung:
Code: 
   mit 6 Divs:
[head_top (übergeordnetes Div)
[logo][middle][repeat (mit variabler Größe)][right]
]

   mit 5 Divs
[head_top (übergeordnetes Div)
[logo][middle]     [right (rechts positioniert)]
]


der code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0ð Transitional//EN"ð "http://www.w3.org/TR/xhtml1/DTD/xhtml1-ð transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	</head>
	<body>
		<div id="container">
			<div id="head_top">
				<div id="head_top_left" />
				<div id="head_top_logo" />
				<div id="head_top_middle" />
				<div id="head_top_right" />
			</div>
		</div>
	</body>
</html>

CSS: 
#container {
	background-color: #000000;
	width: 85%;
	min-width: 800px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	}
#head_top {
	background-color: #ffffff;
	width: 90%;
	min-width: 780px;
	height: 30px;
	margin: auto;
	}
#head_top_left {
	background-color: blue;
	width: 6px;
	height: 30px;
	float: left;
	}	
#head_top_logo {
	background-color: red;
	width: 144px;
	height: 30px;
	margin-left: 6px;
	float: left;
	}
#head_top_middle {
	background-color: green;
	width: 2px;
	height: 30px;
	margin-left: 144px;
	float: left;
	}
	#head_top_right {
	background-color: grey;
	width: 6px;
	height: 30px;
	margin-left: 2px;
	}
 
Zuletzt bearbeitet von einem Moderator:
Hi,

dein Vorhaben setzt du folgendermaßen um:

HTML: 
<div id="container">
    <div id="head_top">
        <div id="head_top_left"></div>
        <div id="head_top_logo"></div>
        <div id="head_top_right"></div>
        <div id="head_top_middle"></div><!-- Der DIV-Block mit der variablen Breite wird innerhalb des Markups der zu umfliessenden Blöcke an letzter Stelle genannt -->
     </div>
</div>
Neu lautende Regeln für diese beiden Blöcke:
CSS: 
#head_top_middle {
background-color: green;
height: 30px;
margin-left: 156px; /* linker Außenabstand zu den beiden linken vorangegangenen Blöcken */
margin-right: 6px; /* rechter Außenabstand zum rechten Block */
}
#head_top_right {
background-color: gray; /* Der Farbname wird mit "a" geschrieben */
width: 6px;
height: 30px;
margin-left: 2px;
float: right; /* Element soll vom nachfolgenden Block linksseitig umflossen werden, und richtet sich am rechten Rand aus */
}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück