Solved

Div not pushing outer div expansion vertically

Posted on 2007-12-04
6
510 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 12

Accepted Solution

by:
GoofyDawg earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

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…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now