Solved

Div not pushing outer div expansion vertically

Posted on 2007-12-04
6
524 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

726 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