3 divs nebeneinander, links und rechts variable Breite

Swagman · 10. Oktober 2009

Hallo,

habe ein dreispaltiges Layout und möchte die mittlere Spalte mit einer fixen Breite festlegen und die linke und rechte Spalte soll sich in der Breite dem Browserfenster anpassen. Die Hintergrundbilder der linken und rechten Spalte sollen dann bei Platzmangel entsprechend abgeschnitten werden.

Anbei mein 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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/transhimalaya/css/template.css" type="text/css" />
</head>
<body id="page_bg">
    <div id="left_col">
	  <div id="top_left">
	
	  </div>
	  <div id="top2_left">
	
	  </div>
    </div>
    <div id="center_col">
        <div id="top_middle">
        </div>
        <div id="top2_middle">
        </div>
        <div id="content">
	    <div id="hg_navi_l">
		Navi links
	   </div>
	   <div id="inhalt">
		Inhalt
	   </div>
	   <div id="hg_facts">
		Facts
	   </div>
        </div>
      </div>
     <div id="right_col">
	  <div id="top_right">
	  rechts1
	  </div>
	  <div id="top2_right">
	  rechts2
	  </div>
     </div>
</body>
</html>

Die CSS:

Code:

html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 13px;
	color: #000000;
	
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

#page_bg {
	padding: 0px 0;
	margin-bottom: 1px;
	width: 100%;
	height: 100%;
	background-color: #f6f2ec;
}

div#left_col {
	float: left;
	width: 100%;
	height: 100%;
}
div#center_col {
	text-align: center;
	margin: 0px auto;
	height: 100%;
	width: 1025px;
}
div#right_col {
	float: right;
	width: 100%;
	height: 100%;
}
div#top_left {
	background: url(../images/hg_oben_l.jpg) 0 0 no-repeat;
	height: 123px;
}
div#top_middle {
	background: url(../images/hg_oben.jpg) 0 0 no-repeat;
	height: 123px;
}
div#top_right {
	background: url(../images/hg_oben_r.jpg) 0 0 no-repeat;
	height: 123px;
}
div#top2_left {
	background: url(../images/hg_oben2_l.jpg) 0 0 no-repeat;
	height: 211px;
}
div#top2_middle {
	background: url(../images/hg_oben2.jpg) 0 0 no-repeat;
	height: 211px;
	
}
div#top2_right {
	background: url(../images/hg_oben2_r.jpg) 0 0 no-repeat left;
	height: 211px;
}

div#content {
	text-align: center;
	width: 100%;
}
div#hg_navi_l {
	background: url(../images/hg_navi_l.jpg) 0 0 repeat-y;
	width: 199px;
	height: 100%;
	float: left;
}
div#inhalt {
	background-color: #ffffff;
	width: 548px;
	height: 100%;
	float: left;
	
}
div#hg_facts {
	background: url(../images/hg_facts.jpg) 0 0 repeat-y;
	width: 278px;
	height: 100%;
	float: right;
}

Bitte um Hilfe - Danke!

Maik · 11. Oktober 2009

Hi,

ich hab leider schlechte Nachrichten für dich, denn dein Vorhaben lässt sich so nicht umsetzen.

Üblicherweise besitzen die äußeren Spaltenblöcke eine fixe Breite, und der mittlere Spaltenblock paßt sich der Fensterbreite an.

Was technisch möglich ist, wäre dieses Konstrukt:

HTML:

<body>
    <div id="leftCol">leftCol</div>
    <div id="rightCol">rightCol</div>
    <div id="centerCol">centerCol</div>
</body>

CSS:

#leftCol {
position:absolute;
left:0;
width:50%;
background:#aaa;
}
#rightCol {
position:absolute;
right:0;
width:50%;
text-align:right;
background:#aaa;
}
#centerCol {
position:relative;
width:1025px;
margin:auto;
z-index:2;
background:#eee;
}

mfg Maik

Swagman · 13. Oktober 2009

Vielen Dank für die Info! Habe mein Layout etwas verändert um das Problem zu lösen. Das einzige was noch nicht funktioniert ist die Eigenschaft height: 100%; Ich hätte gerne die Spalten: "hg_navi_l", "hg_facts" und "inhalt" auf Höhe 100% angezeigt! Finde leider nicht meinen Fehler!

HTML:

Code:

<body id="page_bg">
    <div id="center">
	<div id="maincontainer">
	  <div id="top_middle">
	  Mitte_1
	  </div>
	  <div id="top2_middle">
	  Mitte_2
	  </div>
	  <div id="main_content">
	  	  <div id="left_col">
			&nbsp;
		  </div>
		  <div id="content">
			<div id="hg_navi_l">
			navi_links
			</div>
			<div id="hg_facts">
			facts
			</div>
			<div id="inhalt">
			inhalt
			</div>
		  </div>
		  <div id="right_col">
			&nbsp;
		  </div>
		 
	  </div>
	</div>
	</div>
	
</body>

CSS:

Code:

html {
  height: 100%;
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 13px;
	color: #000000;
	height: 100%;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }


#page_bg {
	padding: 0px 0;
	margin-bottom: 1px;
	width: 100%;
	height: 100%;
	background-color: #f6f2ec;
}

div.center {
  text-align: center;
  height: 100%;
  margin: 0px auto;

}
div#left_col {
	text-align: right;
	float: left;
	width: 210px;
	height: 100%;
}
div#right_col {
	float:right;
	width: 67px;
	height: 100%;
	text-align: left;
}
div#maincontainer {
	text-align: center;
	margin: auto;
	height: 100%;
	width: 1302px;
}
div#top_middle {
	background: url(../images/hg_oben_short.jpg) 0 0 no-repeat;
	height: 123px;
}
div#main_content {
	width: 100%;
	height: 100%;
}
div#top2_middle {
	background: url(../images/hg_oben2_short.jpg) 0 0 no-repeat;
	height: 211px;
}
div#content {
	float: left;
	margin: auto;
	height: 100%;
}
div#hg_navi_l {
	background: url(../images/hg_navi_l.jpg) 0 0 repeat-y;
	width: 199px;
	height: 100%;
	float: left;
}
div#inhalt {
	background-color: #ffffff;
	width: 548px;
	height: 100%;
	float: left;
}
div#hg_facts {
	background: url(../images/hg_facts.jpg) 0 0 repeat-y;
	width: 278px;
	height: 100%;
	float: right;
}

Gruß swagman

Maik · 13. Oktober 2009

Das dürfte an den unzählig verschachtelten <div>-Blöcken liegen.

Außerdem hat dein Konstrukt im IE zur Folge, dass durch diese vielen height:100%-Deklarationen die Seite jetzt schon gescrollt werden kann, obwohl darin noch kein Inhalt enthalten ist.

Schau dir hierzu mal mein CSS-Tutorial CSS-Layout mit 100%-Höhe an.

mfg Maik

Swagman · 17. Oktober 2009

Danke für den Hinweis! Habe mir das Tutorial angesehen und auch versucht die Verschachtelung der divs ein wenig zu verbessern. Leider schaffe ich es immer noch nicht auf die 100% Höhe zu kommen. Müsste doch eigentlich auch bei verschachtelten divs möglich sein. So lange das Elternelement eine 100% Höhe hat. Oder habe ich da etwas falsch verstanden?

Anbei noch mal der abgeänderte Code:

Code:

<?php 

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/transhimalaya/css/template.css" type="text/css" />
</head>
<body id="page_bg">
    <div id="center">
	<div id="maincontainer">
	  <div id="top_middle">
	  &nbsp;
	  </div>
	  <div id="top2_middle">
	    <div id="topmenu">
		<jdoc:include type="modules" name="left" />
		</div>
	  </div>
	  <div id="main_content">
	  	  <div id="left_col">
			&nbsp;
		  </div>
		  <div id="content">
			<div id="hg_navi_l">
			&nbsp;
			</div>
			<div id="hg_facts">
			facts
			</div>
			<div id="inhalt">
			inhalt
			</div>
		  </div>
		  <div id="right_col">
			&nbsp;
		  </div>
	  </div>
	</div>
	</div>
	
</body>
</html>

dazugehörige CSS:

Code:

/*****************************/
/***  html setup  ***/
/*****************************/

html {
  margin-bottom: 1px;
}

form {
  margin: 0;
  padding: 0;
}

body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 13px;
	color: #000000;
}

a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}

a:hover {
	text-decoration: underline;
	font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }


#page_bg {
	padding: 0px 0;
	margin-bottom: 1px;
	width: 100%;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	background-color: #f6f2ec;
	border: 1px dashed blue;
}

div.center {
  position: relative;
  margin: 0 auto;
  min-height: 100%; /* Mindesthöhe in modernen Browsern */
  height: auto !important; /* !important-Regel für moderne Browser */
  height: 100%; /* Mindesthöhe in IE (<7) */
  text-align: center;
  
}
div#left_col {
	text-align: right;
	float: left;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 210px;
}
div#right_col {
	float:right;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 67px;
	text-align: left;
}
div#maincontainer {
	text-align: center;
	position: relative;
	margin: 0 auto;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 1302px;
	
}
div#top_middle {
	background: url(../images/hg_oben_short.jpg) 0 0 no-repeat;
	height: 123px;
}
div#main_content {
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 100%;
}
div#top2_middle {
	background: url(../images/hg_oben2_short.jpg) 0 0 no-repeat;
	height: 211px;
}
div#content {
	float: left;
	margin: auto;
	
}
div#hg_navi_l {
	background: url(../images/hg_navi_l.jpg) 0 0 repeat-y;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 199px;
	float: left;
}
div#inhalt {
	background-color: #ffffff;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 548px;
	float: left;
}
div#hg_facts {
	background: url(../images/hg_facts.jpg) 0 0 repeat-y;
	min-height: 100%; /* Mindesthöhe in modernen Browsern */
	height: auto !important; /* !important-Regel für moderne Browser */
	height: 100%; /* Mindesthöhe in IE (<7) */
	width: 278px;
	float: right;
}
div#mainlevel {
  background: url(../images/hg_menu.jpg) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}

Maik · 17. Oktober 2009

Hi,

ich hab mir den Code jetzt erst garnicht im Browser näher anschauen müssen, um dir zu sagen, dass sich dadurch an der Situation nichts verbessern lassen wird.

Und nein, ein verschachtelter Block nimmt mit height:100% oder min-height:100% nicht automatisch die Höhe seines Elternelements an, sondern nur, was sein Inhalt von ihm abverlangt.

mfg Maik

Maik · 17. Oktober 2009

Achja, ich hab da noch zwei grundsätzliche Anmerkungen.

Da das Skalieren der Boxen im Browser ja nicht funktioniert, wäre eine Skizze / grafische Vorschau als Anhang von Vorteil, damit man mal den Soll-Zustand des Seitenlayouts gesehen hat.
Da die im CSS-Code referenzierten Hintergrundbilder hier nicht vorliegen, solltest du deine Seite parallel online stellen, damit auch der grafische Gesamteindruck gewonnen werden kann.

mfg Maik

3 divs nebeneinander, links und rechts variable Breite

Swagman

Grünschnabel

Maik

Swagman

Grünschnabel

Maik

Swagman

Grünschnabel

Maik

Maik

Neue Beiträge