Solved

Div not pushing outer div expansion vertically

Posted on 2007-12-04
6
514 Views
Last Modified: 2012-05-05
I have a div that has 6 small divs inside of it

Why when I add more text to the dov or more small dives does it not cause the main div to expan vertically???

PLease advise

<!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">
<title>Carmel Obstetrics &amp; Gynecology</title>
<link href="styles/carmelStyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
      font-size: 14px;
      font-weight: bold;
}
.staff {
      height: 225px;
      width: 500px;
      border: 4px solid #999999;
      padding-left: 95px;
      position: relative;
      margin: 20px;
      float: left;
}
.staffPhoto {
      border: 4px solid #6F9ABC;
      height: 108px;
      width: 75px;
      margin-right: 10px;
      margin-bottom: 10px;
      float: left;
      position: absolute;
      left: 0px;
      top: 0px;
}
-->
</style>
</head>

<body>
<div class="mainDiv">
<cfinclude template="header.cfm">
<cfinclude template="Nav_About_Us.cfm">
<div class="PagesBody">
<p class="style1">Our Staff</p>
<div class="staff">
<div class="staffPhoto"><img src="../images/Solomon_Philip_0594_WEB.jpg" width="75" height="108" /></div>
   info goes here
</div>
<!------------------------------------------------------------------------------------------------------>
<div class="staff">
<div class="staffPhoto"><img src="../images/Solomon_Philip_0594_WEB.jpg" width="75" height="108" /></div>
   info goes here
</div>
<!------------------------------------------------------------------------------------------------------>
<div class="staff">
<div class="staffPhoto"><img src="../images/Solomon_Philip_0594_WEB.jpg" width="75" height="108" /></div>
   info goes here>
</div>
<!------------------------------------------------------------------------------------------------------>
<div class="staff">
<div class="staffPhoto"><img src="../images/Solomon_Philip_0594_WEB.jpg" width="75" height="108" /></div>
   info goes here
</div>
<!------------------------------------------------------------------------------------------------------>
<div class="staff">
<div class="staffPhoto"><img src="../images/Solomon_Philip_0594_WEB.jpg" width="75" height="108" /></div>
   info goes here
</div>
</div>
</div>
<cfinclude template="footer.cfm">
</body>
</html>
0
Comment
Question by:judsonmusic
  • 4
  • 2
6 Comments
 
LVL 3

Author Comment

by:judsonmusic
ID: 20405781
ok, I figured it out, it was set to fixed. or a fixed height, but here is the problem, there is a div to the left with links in it that I need to expand vertically the same height as whatever div it is nested within. How do I do that?

Thanks

Judson
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 20406475
here is a code that is the closest to what I can get but doesnt work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Carmel Obstetrics &amp; Gynecology</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.sideBar {
      height: auto;
      width: 150px;
      background-color: #6699FF;
      float: left;
}
.container {
      background-color: #FF9933;
      width: 980px;
      height:inherit;
}
.text {
      width: 500px;
      border: 4px solid #999999;
      padding-left: 95px;
      background-color: #FFFFFF;
      height:500px;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="sideBar">I want this box to expand according to the height of the container.<br>
  </div>
<div class="text">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>THIS BOX WILL PUSH THE ORANGE <br>
    CONTAINER BOX OPEN VERTICALLY.</p>
</div>
</div>
</body>
</html>
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 20406507
this gives the effect that I want with the blue bar, but the lack of DTD messes everythign up why?

<html>
<title>Carmel Obstetrics &amp; Gynecology</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.sideBar {
      height: 100%;
      width: 150px;
      background-color: #6699FF;
      float: left;
}
.container {
      background-color: #FF9933;
      width: 980px;
      height: 100%;
}
.text {
      width: 500px;
      border: 4px solid #999999;
      padding-left: 95px;
      background-color: #FFFFFF;
      height:500px;
}
-->
</style>
</head>

<body>
<div class="container">
  <div class="sideBar">I want this box to expand according to the height of the container.<br>
  </div>
<div class="text">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>THIS BOX WILL PUSH THE ORANGE <br>
    CONTAINER BOX OPEN VERTICALLY.</p>
</div>
</div>
</body>
</html>
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 12

Accepted Solution

by:
GoofyDawg earned 500 total points
ID: 20415817
A DTD enforces the version (x)HTML the browser will render a page. When you don't have one, you can do all sorts of stuff - and get away with it - because you'll be in what's commonly known as "quirks" mode. But with a DTD, the browser is expecting you to follow specific semantics. The upshot is that while there will still be differences between IE and other browsers, overall, the playing field will be much lower with respect to display behavior.

In your case, you started out with a DTD, built up your code to obey the rules of the DTD (even though may not have been fully aware of it), then your display broke because you're now in quirks mode. Stick with a DTD. You'll be better off for it.

As far as your particular problem is concerned, add this to the top of your CSS

html,body {margin:0;padding:0;height:100%;border:0;}

100% heights are a bit tricky because the base container (the body) may or may not be stretching to the vertical height of the viewport (browser window) by default. By enforcing this in the CSS, you'll ensure the body is at 100%, and the html within it will follow suit, unless you redefine the height for a particular element.

GoofyDawg
0
 
LVL 3

Author Comment

by:judsonmusic
ID: 20420117
Now what you are saying is that not matter what I put in my document body, its going to stretch to 100%
unless I specify otherwise??

Can you make an example for me with a  DTD??? similar to what I have up top??
0
 
LVL 12

Expert Comment

by:GoofyDawg
ID: 20451289
Sorry I didn't get back to you on this last request. Do a google search on HTML DTD. You can use any one, just so long as you include the w3c.org URL. For instance, put this at the top of your document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

so that the page validates to a the strict rules of HTML 4.01. You can even use a loose DTD (which allows for more fudging), just as long as you have the URL in the DTD declaration. The reason for this is that the URL takes IE out of quirks mode; the point being that what you're trying to achieve is an even playing field with how the browsers render your page.

So now, just use the CSS that I provided you with. While there won't be exact replicas between the browsers, they'll look proportionately the same.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question