?
Solved

Div not pushing outer div expansion vertically

Posted on 2007-12-04
6
Medium Priority
?
537 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 12

Accepted Solution

by:
GoofyDawg earned 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses
Course of the Month14 days, 2 hours left to enroll

809 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