✔ DIV`s mit float und 100% breiter hinterlassen Rand

owned139 · 24. April 2010

Hallo liebe Community,
ich habe das Prroblem, dass Oper 10.51 und Iron 4 einen Rand nach den DIV`s hinterlässt, obwohl sie zusammen eine Breite von 100% haben. Beim Firefox 3.6 sowie beim IE6-8 ist dies nicht der Fall.
Wie kann ich diesen Fehler beheben bzw. woran liegt es überhaupt?

Screen: Klick mich

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

	<div id="header"></div>
    <div id="wrap">
    	<div id="col1"></div>
        <div id="col2">
        	<div class="forum_title_info_forum">Forum</div>
        </div>
        <div id="col3">
        	<div class="forum_title_info">Last Post</div>
        </div>
        <div id="col4">
        	<div class="forum_title_info">Threads</div>
        </div>
        <div id="col5">
        	<div class="forum_title_info">Posts</div>
        </div>
        <div class="clear"></div>
        <div class="cat_name"></div>
        <div class="cat_icon_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>

        <div class="cat_icon_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>
    </div>

</body>
</html>

CSS-Code:

Code:

html, body{
	margin:0px;
	padding:0px;
	background-color:#1b1b1b;
	font-family:Verdana, Geneva, sans-serif;
}
#header{
	width:100%;
	height:100px;
	background-color:#CCC;
	margin-bottom:50px;
}
#wrap{
	min-width:900px;
	margin-left:20px;
	margin-right:20px;
	padding:1px;
	border:1px solid #363636;
	overflow:hidden;
}
#col1{
	width:5%;
	min-width:40px;
	height:22px;
	background-image:url(img/forum_cat_title_bg.jpg);
	float:left;
}
#col2{
	width:60%;
	height:22px;
	background-image:url(img/forum_cat_title_bg.jpg);
	margin-left:-1px;
	border-left:1px solid #1b1b1b;
	float:left;
}
#col3{
	width:18%;
	height:22px;
	background-image:url(img/forum_cat_title_bg.jpg);
	margin-left:-1px;
	border-left:1px solid #1b1b1b;
	float:left;
}
#col4{
	width:9%;
	height:22px;
	background-image:url(img/forum_cat_title_bg.jpg);
	margin-left:-1px;
	border-left:1px solid #1b1b1b;
	float:left;
}
#col5{
	width:8%;
	height:22px;
	background-image:url(img/forum_cat_title_bg.jpg);
	margin-left:-1px;
	border-left:1px solid #1b1b1b;
	float:left;
}
.forum_title_info_forum{
	font-weight:bold;
	color:#FFF;
	font-size:12px;
	padding-left:10px;
	margin-top:3px;
}
.forum_title_info{
	text-align:center;
	font-weight:bold;
	color:#FFF;
	font-size:12px;
	margin-top:3px;
}
.cat_name{
	margin-top:1px;
	margin-left:0px;
	margin-right:0px;
	width:auto;
	height:27px;
	background-image:url(img/forum_cat_name_bg.jpg);
}
.cat_icon_wrap{
	min-width:40px;
	width:5%;
	height:54px;
	margin-top:1px;
	background-color:#282828;
	float:left;
}
.cat_title_wrap{
	width:60%;
	height:54px;
	background-color:#2c2c2c;
	border-left:1px solid #1b1b1b;
	margin-top:1px;
	margin-left:-1px;
	float:left;
}
.cat_lp_wrap{
	width:18%;
	height:54px;
	background-color:#282828;
	border-left:1px solid #1b1b1b;
	margin-top:1px;
	margin-left:-1px;
	float:left;
}
.cat_threads_wrap{
	width:9%;
	height:54px;
	background-color:#2c2c2c;
	border-left:1px solid #1b1b1b;
	margin-top:1px;
	margin-left:-1px;
	float:left;
}
.cat_posts_wrap{
	width:8%;
	height:54px;
	background-color:#282828;
	border-left:1px solid #1b1b1b;
	margin-top:1px;
	margin-left:-1px;
	float:left;
}
.clear{
	clear:both;
}
.cat_wrap_border{
	border-left:1px solid #363636;
	border-top:1px solid #363636;
	height:53px;
}

Ich habe das Design nochmal mit Tabellen, sollte ich dies besser benutzen?

Maik · 24. April 2010

Hi,

entweder ist dir irgendwo ein Rechenfehler unterlaufen,oder es ist das Box-Modell, nach dem sich Opera, aber auch Safari und Google Chrome orientieren.

Wenn #wrap im Viewport die Mindestbreite einnimmt, verschwindet in ihnen die Lücke zum rechten Boxenrand.

mfg Maik

owned139 · 24. April 2010

Also das erste kanns nicht sein.
Spalte 1 ist 5% breit.
Spalte 2 ist 60% breit.
Spalte 3 ist 18% breit
Spalte 4 ist 9% breit und Spalte 5 ist 8% breit.
Das macht 100%

Die letzten 4 Spalten haben noch nen margin-left von -1 da sie jeweils links nen Border von 1 px haben.

Maik hat gesagt.:
Hi,
Wenn #wrap im Viewport die Mindestbreite einnimmt, verschwindet in ihnen die Lücke zum rechten Boxenrand.
mfg Maik

Ja ist mir auch schon aufgefallen...allerdings soll das Ding flexibel sein.

Maik · 24. April 2010

Jo, die Methode ist aber schon "grenzwertig", um das Box-Modell auszuhebeln

Vielleicht solltest du es anstelle der prozentualen Breitenangaben mal mit absoluten versuchen, und lediglich für den Spaltenblock #col2 eine relative Breite einrichten, die auf die Skalierung von #wrap reagiert.

mfg Maik

owned139 · 24. April 2010

Hatte ich schon versucht...das gab im IE dann komisch ergebnisse

Da ich nicht genau weiß wie ich das realisieren soll wäre es nett, wenn du es mir ein wenig erläutern könntest

Maik · 24. April 2010

Da mußt du dich ein wenig gedulden, denn jetzt ist es Zeit für das Abendmahl ;-)

mfg Maik

owned139 · 24. April 2010

Ok guten hunger und vielen dank für deine hilfe

Maik · 24. April 2010

So, da bin ich wieder und hab auch gleich den überarbeiteten Code im Gepäck ;-)

Also, der zweite Spaltenblock von links (#col2 und .cat_title_wrap) wird im HTML-Code an die letzte Stelle gerückt, und anstelle der width und float-Regel mit einer margin-Regel aus dem normalen Textfluß genommen, damit er seine benachbarten Blöcke umfließt. Das Maß für den linken und rechten Außenabstand ergibt sich aus der Breitensumme der benachbarten Blöcke. Die drei rechten äußeren Spalten erhalten hier nun im Gegenzug eine float:right-Regel.

Somit besitzt in diesem Konzept der zweite Spaltenblock eine relative Breite, die sich an der Breite des umschliessenden Blocks #wrap orientiert.

HTML:

<body>

    <div id="header"></div>
    <div id="wrap">
        <div id="col1"></div>
        <div id="col3">
                <div class="forum_title_info">Last Post</div>
        </div>
        <div id="col4">
                <div class="forum_title_info">Threads</div>
        </div>
        <div id="col5">
                <div class="forum_title_info">Posts</div>
        </div>
        <div id="col2">
                <div class="forum_title_info_forum">Forum</div>
        </div>
        <div class="clear"></div>
        <div class="cat_name"></div>
        <div class="cat_icon_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>

        <div class="cat_icon_wrap">
                <div class="cat_wrap_border"></div>
        </div>

        <div class="cat_lp_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>
</div>

</body>

CSS:

#col1{
        width:45px;
        /*min-width:40px;*/
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        float:left;
}
#col2{
        /*width:60%;*/
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        /*float:left;*/
       margin:0 315px 0 45px;
}
#col3{
        width:161px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
#col4{
        width:80px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
#col5{
        width:71px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
...
.cat_icon_wrap{
        /*min-width:40px;*/
        width:45px;
        height:54px;
        margin-top:1px;
        background-color:#282828;
        float:left;
}
.cat_title_wrap{
        /*width:60%;*/
        height:54px;
        background-color:#2c2c2c;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        /*float:left;*/
       margin:0 315px 0 45px;
}
.cat_lp_wrap{
        width:161px;
        height:54px;
        background-color:#282828;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}
.cat_threads_wrap{
        width:80px;
        height:54px;
        background-color:#2c2c2c;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}
.cat_posts_wrap{
        width:71px;
        height:54px;
        background-color:#282828;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}

Wie du siehst, habe ich desweiteren im Stylesheet deine margin-left:-1px-Regeln auskommentiert, und stattdessen die Rahmenstärke von den width-Eigenschaften subtrahiert.

Falls du dich fragen solltest, wie ich auf die einzelnen px-Werte gekommen bin, hier ein kleines Rechenexempel für den ersten Block:

Code:

5% * 900px / 100% = 45px

Zwei Schnappschüsse aus Opera und Safari füge ich auch noch bei

Viel Spaß beim Weiterbasteln

mfg Maik

owned139 · 24. April 2010

Klappt supi...hatte es ganz am Anfang genau so...allerdings hab ich dann das randproblem beim IE...undzwar auf beiden seiten :/

Maik · 24. April 2010

Da fördert der IE6 seinen berühmt berüchtigten 3px-Gap-Bug zu Tage.

Und weil dies in der Vergangenheit desöfteren ein Thema hier im CSS-Forum war, hab ich ihm vor zwei Jahren einen Beitrag im Webmaster FAQ-Forum gewidmet, um nicht immer wieder auf's Neue den Sachverhalt erläutern und den Korrektur-Code posten zu müssen:

CSS Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?

mfg Maik

✔ DIV`s mit float und 100% breiter hinterlassen Rand

owned139

Mitglied

Maik

owned139

Mitglied

Maik

owned139

Mitglied

Maik

owned139

Mitglied

Maik

owned139

Mitglied

Anhänge

Maik

Neue Beiträge