Solved

Div not pushing outer div expansion vertically

Posted on 2007-12-04
6
512 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

786 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