div grootte met gelijk aan andere div

Status
Niet open voor verdere reacties.
N

nl18663

Gebruiker
Lid geworden
19 dec 2007
Berichten
156
Hallo,

ik heb 2 div's een main en een menu in een container.
nu wil ik hebben dat de menu div in lengte mee groeit met de main aangezien deze de content heeft en dus variabel is. maar hoe ik een div van buiten af manipuleren?

alvast bedankt
 
Dit is wel wat weinig informatie. Bedoel je drie naast elkaar staande verticale divs?
Het ligt er ook aan hoe je die divs hebt gepositioneerd en zo.
Als het om drie verticale gefloate divs gaat, zou je kunnen zoeken op 'faux columns'.
Anders moet je even 'n link naar de code geven.
 
ik denk dat dit wel even kan helpen.

PHP: 
<div id="container">
    <div id="menuDiv">
      <?php
      // is nodig om te kunnen bepalen uit welk file de request komt dat ivm aanmaken edit ed.
        $path_parts = pathinfo(__FILE__);
        $filename = $path_parts['basename'];
        // navigatie van het menu uit de database halen.
        echo navigatie($page_id, $filename);
      ?>
      <a href="http://www.vca.nl" title="VCA">
      <div id="vcaDiv">
        
      </div>
      </a>
    </div>
    <div id="mainDiv">
      <?php

          // om content in mainDiv op te halen uit de database en te controleren of er een geldig ID met $_GET is gekomen:
          if($page_id['id']!= "") {
            $sql = "SELECT content
                    FROM pagina
                    WHERE id = {$page_id['id']}
                    LIMIT 1";
            $main_Output = get_db_info($sql);
            confirm_query($main_Output);
              while($Output = mysql_fetch_array($main_Output)){
                echo $Output["content"];
              }
          } else {
              redirect_to("index.php?page_id=1");
          }
      if(($page_id['id'] == 1) || ($page_id['id'] == 11 || $page_id['id'] == 12)) {
        
      } else {
        echo "<div id=\"mainFootDiv\">{$footer}</div>";
      }
      ?>
    </div>
  </div>

Code: 
#mainDiv {
	background: #373a45;
	float: right;
	margin-top: 20px;
	margin-left: 20px;
	padding-left:20px;
	width: 755px;
                height: auto;
	height: 430px;
	
}

#container {
	width: 945px;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
}

#menuDiv {
	height: 100%;
	width: 145px;
	background: #003;
	float: left;
}

#vcaDiv {
	height: 65px;
	width: 73px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 140px;
	padding-bottom: 30px;
	background: url(../images/vca_logo.gif) no-repeat;
}
 
Ja, dat helpt. Ik heb alle php er even uitgesloopt, want die maakt in wezen niet uit. Wat ik in jouw geval zou doen heet 'faux columns':
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style type="text/css">
		#container {width: 945px; margin-right: auto; margin-left: auto; height: 100%; background: red; overflow: hidden;}
		#menuDiv {height: 100%; width: 145px; background: #003; float: left;}
		#vcaDiv {height: 65px; width: 73px; margin-right: auto; margin-left: auto; margin-top: 140px; padding-bottom: 30px; background: url(../images/vca_logo.gif) no-repeat;}
		#mainDiv {background: #373a45; float: right; margin-top: 20px; margin-left: 20px; padding-left:20px; width: 755px; height: auto; height: 430px;}
	</style>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="container">
		<div id="menuDiv">
			<div id="vcaDiv"></div>
		</div>
		<div id="mainDiv"></div>
	</div>
</body>
</html>

Je stopt de achtergrond niet in #menuDiv of #mainDiv, maar in #container. Als #menuDiv en #mainDiv twee verschillend gekleurde achtergronden moeten krijgen, moet je gebruik maken van 'n achtergrond-afbeelding die uit twee kleuren bestaan en die je op de goede plaats positioneert. Die afbeelding hoeft maar 1px hoog te zijn, dus heel klein in omvang.
In de code hierboven heb ik de achtergrond gewoon rood gemaakt. Je ziet dat het rode deel even hoog is als de langste kolom. Dat komt door het toevoegen van overflow: hidden aan #container.
Hoe dat werkt is eigenlijk onbekend, maar 't werkt. De achtergrond is nu altijd even lang als de langste kolom.

Edit: doctype en zo moet je mogelijk even aanpassen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan