[CSS] Div mit float positionieren, ohne Zwischenabstand

MasterN · #1 (**permalink**) 16.11.2010, 20:37

Hallo community,
ich will zwei DIV d1 und d2 nebeneinander in meinem DIV d_main positionieren, jedoch ohne Zwischenabstand. Weiß einer wie?
Ich hab schon einige Seiten angeschaut, finde aber keine Lösung.

Danke

ArcVieh · #2 (**permalink**) 16.11.2010, 20:43

In dem Du die beiden einfach floatest?

MasterN · #3 (**permalink**) 16.11.2010, 20:44

Ja, mach ich ja, aber die haben dann einen Zwischenabstand, den ich nicht haben will!

ArcVieh · #4 (**permalink**) 16.11.2010, 20:47

Code:

div {
   margin:0;
}

Wenn das nicht klappt, kann ich ohne Code von dir einfach nur raten wo dein Problem liegt.

Ansonsten bitte hier lesen: http://xhtmlforum.de/40080-f-r-frage...twortende.html

MasterN · #5 (**permalink**) 16.11.2010, 20:50

HTML CODE:

HTML-Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="_css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
  <div id="header">Logo  *  Uhrzeit  *  Login</div>
  <div id="navi">Dropdown-Navi</div>
  <div id="content_1">
    <div id="navi2">Navi 2 * Auflistung</div>
    <div id="contentt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
  </div>
  <div id="footer">&copy; by N 2010. All rights reserved.</div>
</div>
</body>
</html>

CSS CODE:

Code:

/* [General */
 div {
	border: 1px solid; 
 }
 html {
	 height: 100%;
	 font: "Century Gothic";
 }
 body {
	text-align: center; 
	background-color: #0C0;
 }
 .clear {
	 clear: both;
 }
 /* General] */
 /* [DIV */
 div#content { 
 	 text-align: center;
 }
 div#header {
	 clear: both;
	 text-align: left;
	 height: 100px; 
	 width: 100%
 }
 div#navi {
	 clear: both;
	 text-align: left;
	 margin-top: 5px;
	 height: 40px;
 }
 div#navi2 {
	 float: left;
	 margin: 20px 0px auto 0;
 }
 div#contentt {
	 float: right;
	 margin: 0 auto;
	 margin-top: 20px;
	 height: auto;
	 width: 80%;
 }
 div#footer {
	 clear: both;
	 height: 60px;
	 text-align: left;
 }
 /* DIV] */

ArcVieh · #6 (**permalink**) 16.11.2010, 21:05

Da kannst Du die "Holy Grail"-Taktik adaptieren.
Sprich: #navi2 & #contentt in ein extra Div packen, #navi2 eine feste Breite zuweisen, dem extra-div einen left-padding um die Breite von #navi2 geben, #navi2 float geben und um die Breite rausziehen mit einem negativen margin auf #navi2.

MasterN · #7 (**permalink**) 16.11.2010, 21:23

Ich versteh das nicht ganz, könntest Du mir das bitte als Code geben?

ArcVieh · #8 (**permalink**) 16.11.2010, 21:44

Code:

ul, div {
	margin:0;
	padding:0;
}

#wrap-content {
	padding-left:182px;
	border:1px solid silver;
}

#wrap-content #content {
	width:100%;
	border:1px solid gray;
}

#wrap-content #nav-left {
	margin-left:-182px;
	float:left;
	width:180px;
	list-style:none;
	border:1px solid black;
}

HTML-Code:

<div id="wrap-content">
	<ul id="nav-left">
		<li><a href="#">Menueitem</a></li>
		<li><a href="#">Menueitem</a></li>
		<li><a href="#">Menueitem</a></li>
		<li><a href="#">Menueitem</a></li>
	</ul>
	<div id="content">
		<h2>Maincontent</h2>
		<p>Text</p>
	</div>
</div>

Bin mir aber gerade nicht sicher bzgl der Browserkompatibilität, müsstest Du bitte austesten.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Mozilla zeigt DIV zu oft an	cracki	CSS	6	09.03.2008 15:22
Testcase: float, overflow: hidden; und alte Geckos...	heiko_rs	CSS	0	19.11.2007 21:26
positionieren von div elementen	Kjatar	CSS	3	08.11.2006 21:49
Zeilenumbruch bei horizontal nebeneinanderliegenden divs	GrafZahl	Knowledge Base	10	16.07.2004 16:13