✔ "Halbflexibles" Layout

Gäbe es noch eine andere Möglichkeit das auf dem Bild gezeigtes Layout umzusetzen und gleichzeitig die Flexibilität zu bewahren? Also ohne clear:both anwenden zu müssen?
 
Hast du einen Link zu der Seite? Ansonsten poste deinen vollständigen HTML- und CSS-Code.

Mal schauen, ob sich da was machen lässt.

mfg Maik
 
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="style/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="head">
    <div id="head_logo"><a href=""><img src="http://www.tutorials.de/forum/images/logo.png" alt="Our Work" /></a>
      <ul id="nav">
        <li><a href=""><img src="http://www.tutorials.de/forum/images/nav_casestudies.png" alt="casestudies" /></a></li>
        <li><a href="" class="active"><img src="http://www.tutorials.de/forum/images/nav_showcases.png" alt="showcases" /></a></li>
      </ul>
    </div>
  </div>
  <div id="content_right">
    <div id="content_clients"><img src="http://www.tutorials.de/forum/images/casestudy_atlascopco.png" alt="Atlas Copco Case Study" />
  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="content_left" >
    <div id="client_info_container" >
      <div id="client_info" >
        <h1><img src="http://www.tutorials.de/forum/images/definiens_logo.png" alt="Defniniens" /></h1>
        Lorem Ipsum dolar sit amet
        <hr />
        Lorem Ipsum dolar sit amet. Lorem Ipsum dolar sit amet. Lorem Ipsum dolar sit amet
        <div id="timeline"><img src="http://www.tutorials.de/forum/images/august06.png" /></div>
      </div>
      <div class="clear"></div>
    </div>
    <div id="case_study"><a href=""><img src="http://www.tutorials.de/forum/images/case_study.png" alt="Download Case Study" /></a></div>
  </div>
</div>
</body>
</html>

Code: 
@charset "utf-8";
/* CSS Document */

* { padding: 0; margin: 0; border: 0; }
html, body {
	color: #64623e;
	font-size: 11px;
    height:100%;  
	background-color: #dad4a0;
	background-image:url(../images/background.jpg);
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-repeat: no-repeat;	
	background-attachment: fixed;
}
#container { width: 60%; min-width: 770px;}

/* Head */

#head {
	margin-top: 150px;	
	height: 150px; 	
}
#head_logo { width: 495px; float:right; }

/* Content right */

#content_right { 
	float:right; 
	width: 495px;
	padding-left: 10px;		
	border-left: 1px solid #9f975c; 
}
#content_clients { width: 360px; } 

/* Content left */

#content_left { margin-right:515px;	}
#content_left h1 { margin-bottom: 10px; }

/* Client */


#client_info_container {
	padding: 10px;	
}
#client_info {
	text-align: right;
	width: 230px;
	float: right;
}
#client_info hr { display: block; background-color: #9b9667; height: 1px; margin: 5px 0 5px 0;}
ul#clients li {
	list-style-type: none;
    float: left;
    margin-bottom: 10px;
    margin-left: 10px;	
}
ul#clients li a img { width: 75px; } 
ul#clients li a {
	vertical-align: middle;
    height: 90px;
    width: 90px;
    text-align:center; 
    display:table-cell;
}
#case_study a { padding: 7px; display: block; }
#timeline {	
	margin-top: 10px;
	width: 230px;	
	height: 30px;
	
	-webkit-border-radius: 4px;    
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	background-color: #dad4a0;
}
#case_study { margin-top: 10px; text-align: right; }

/* Stuff */

.box_orange, ul#clients li, ul#sort li:hover, ul#nav li:hover, #case_study a:hover {
	color: #dad4a0;
	background-color: #e05600;
	background: -moz-radial-gradient(center, #f97600, #e05600);
	background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 90, from(#f97600), to(#e05600));
		
	-webkit-border-radius: 4px;    
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	-moz-box-shadow: 0 1px 5px #a6a27b;
	-webkit-box-shadow: 0 1px 5px #a6a27b;
	box-shadow: 0 1px 5px #a6a27b;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#a6a27b', Direction=160, Strength=3);
}

.box_grey, ul#clients li:hover, ul#sort li, ul#nav li, #client_info_container, #case_study a {
	color: #dad4a0;
	background-color: #5c594e;
	background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.49, rgb(92,89,78)), color-stop(0.93, rgb(122,119,98)));
	background: -moz-linear-gradient(left center, rgb(92,89,78) 49%, rgb(122,119,98) 93%);
	
	-webkit-border-radius: 4px;    
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	-moz-box-shadow: 0 1px 5px #a6a27b;
	-webkit-box-shadow: 0 1px 5px #a6a27b;
	box-shadow: 0 1px 5px #a6a27b;
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#a6a27b', Direction=160, Strength=3);
}
.clear{ clear: both; }

/* Sort */

ul#sort li {
	list-style-type: none;
	text-align: right;
	margin-bottom: 10px;
	height: 47px;	
	
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-topleft: 0;	
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-top-left-radius: 0;	
}
ul#sort li a { display: block; }
ul#sort li img { margin-top: 2px; margin-right: 20px; }

/* Navigation */

#nav {
	width: 495px;
	float:right;
}
ul#nav li {
	height: 30px;
	list-style-type: none;
	float:left;
	margin-right: 10px;
	margin-top: 5px;
	line-height: 40px;
	padding-left: 5px;
	padding-right: 5px;
}

Im IE8 besthet der Fehler außerdem komischwerweise nicht, obwohl der IE normalerweise immer der Übeltäter ist :)
Es ist leider nur lokal, also hier der Quelltext
 
Deklariere overflow:hidden für #client_info_container anstelle des darin eingebundenen DIVs .clear.

Übrigens fehlt in deinem CSS-Konzept ein abschliessendes "Clearing" der Floatumgebung (#content_left / #content_right), was in den standardkonformen Browsern sichtbar wird, wenn du für #container beispielsweise einen umlaufenden Rahmen (border:1px solid #000) definierst, und der Inhaltsumfang im rechten Spaltenblock größer (höher) ist, wie im linken.

Lösung:
Code: 
<div id="container" class="clearfix">
CSS: 
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik
 
Danke vielmals eine einfache Änderung hat die gewünschte Auswirkung. Warum aber overflow:hidden? Warum ich clear nicht benutzen darf erschneint mir klar: da der linke Content keine float Anweisung besitzt und auch keine besitzen darf. Ich kenne overflow nur in Verbindung, um Scrollbalken verschwinden zu lassen bzw. anzuzeigen oder irre ich mich jetzt gerade.Funktioniert overflow in jedem Fall (anstatt clear in solchen Fällen) oder nur in diesem speziellen und was wäre die elegantere (mehr Browserunterstützung usw.) Lösung, wenn sowohl clear als auch overflow funktioniert hätten bei mir?
 
Die overflow-Eigenschaft lässt sich eben auch andersweitig nutzen, als das Scrollbalkenverhalten im Browser zu steuern :)

Hier hab ich ein praktisches Beispiel, das in standardkonformen Browsern (FF, IE8, Opera, Safari, u.ä.) den Unterschied mit und ohne der overflow:hidden-Regel eindrucksvoll hervorhebt:
Das ist meines Wissens die eleganteste Lösung, die für deinen Problemfall zur Verfügung steht, um das "Clearing" ohne die clear-Eigenschaft vorzunehmen, und den aufgekommenen Darstellungsfehler zu vermeiden.

Wegen ihrer Browserunterstützung brauchst du dir hier auch keine Gedanken zu machen - du kannst die Seite ja gerne in den einzelnen Browsern anschauen :)

mfg Maik
 
Ah gut zu wissen, danke. Ich habe öfters solche Situationen, in denen ich dann umständlich irgendwie mit clear arbeite, was in den meisten Fällen zwar funktioniert, aber eine unsaubere Lösung ist.
Das Layout ist sowieso in der Art absichtlich nur für neuere Browser konzipiert und funktioniert bei mir dort auch soweit. Aber selbst der Internetexplorer 8 stellt es richtig dar, wenn auch ohne runde Ecken, was aber verkraftbar ist.

Irgendwann muss der IE 6 ja mal aussterben, wenn man einfach Seiten nicht mehr für diesen konzipiert wirds vielleicht mal in 5 Jahren geschehen hoffentlich.
 
Superdok hat gesagt.:
Aber selbst der Internetexplorer 8 stellt es richtig dar
Zum Vergrößern anklicken....
Du darfst den IE8 nicht mehr mit seinen Vorgängern, insbesondere dem IE6, vergleichen. Dazwischen liegen Welten.

Oder um's sportlich zu umschreiben: "IE8 spielt in einer anderen Liga" ;-)

Problematisch wird's mit ihm, wenn er in den proprietären "Quirks Mode" geschaltet wird - dann verhält er sich genauso buggy, wie IE5/6 :)

mfg Maik
 
Bald kommt ja IE9, welcher eigentlich recht gut sein soll.
wie ich gerade sehe, funtioniert die Seite im IE8 doch nicht oder ich hab irgendwas falsch gemacht. Bei mir werden die grauen Flächen nicht angezeigt und wenn man das Browserfenster zusammenschiebt, dann verschiebt sich die linke Box unter die Rechte. Eigentlich hatte ich im Gedächnis, dass es bis auf die runden Ecken grad vorhin funktioniert hat.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück