CSS Layout question

Hi

I have the following page:

http://www.scfsb.com/CHGTest/DisplayProject.php?ProjectID=1&ImageNum=3

If you click on the thumbnails you can see that the div they are in expands and contracts . My problem is that I need the whole page to do the same thing. As you can see when you display a larger image the text overflows the bottom. The div the main page is in is MContainer.

Any Help would be appreciated.

Nick Steele
nsteele84Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
jonahzonaConnect With a Mentor Commented:
Here is the changes in the CSS.

The problem was all of your positon properties. If you want your outer div to extend depending on content, you need to use floats.

This will help the height of the outer div adjust as necessary.

What I did was add an OUTER div that centered everything. Then I floated the div MContainer div.

I also removed all position properties and left properties.

Let me know if you have any questions. Please note that this was not an attempt to simply do the work for you. Please analyze the markup to see how you can avoid this in the future.

Again, if you have any questions how this works, please post them here.

#MContainer {
    background-color: #FFFFFF;
    border: thin none #FFFFFF;
    float: left;
    height: 100%;
    text-align: left;
    width: 790px;
    z-index: 1;
}
#MContent {
    font-family: Verdana,Geneva,sans-serif;
    height: 750px;
    left: 74px;
    margin: 0 auto;
    top: 290px;
    width: 650px;
    z-index: 1;
}
#menu {
    height: 37px;
    top: 100px;
    width: 755px;
    z-index: 5;
}
#header {
    background-color: #FFFFFF;
    height: 95px;
    left: 0;
    top: 0;
    width: 790px;
    z-index: 2;
}
#Col1Div {
    background-color: #EDEEFC;
    clear: left;
    float: left;
    padding-bottom: 10px;
    padding-left: 0;
    padding-top: 10px;
    width: 650px;
    z-index: 1;
}
#Col2Div {
    background-color: #FEF5D6;
    clear: left;
    float: left;
    margin: 0 auto;
    padding: 5px;
    width: 650px;
    z-index: 1;
}
#ColDivSeperator {
    clear: left;
    float: left;
    width: 650px;
    z-index: 1;
}

Open in new window

0
 
jonahzonaCommented:
This is a nesting issue.

I am working through the elements to see what changes to the css will keep the current styling but allow the page to expand.
0
 
jonahzonaCommented:
Okay, I was able to do it.

Here is a screen shot.

It took significant markup changes. I will post in a minute.

 Screenshot
0
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

 
jonahzonaCommented:
Sorry wrong screenshot.

here is the finished one (centered content)


ee13.JPG
0
 
jonahzonaCommented:
Here is the HTML. Will post CSS in a minute.

The two divs I added have inline CSS, which you could quickly move to your CSS file.

<div id="overall" style="width: 790px; height: 100%; margin: 0pt auto; background: #FFF;">  
<div id="MContainer">
  <div id="header">
    <div align="center"><img src="images/logo.jpg" width="458" height="95"></div>
  </div>
  <div id="menu">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a tabindex="-1" href="about.html">About</a></li>
      <li><a tabindex="-1" href="products.html" class="MenuBarItemSubmenu">Products</a>
        <ul>
          <li><a tabindex="-1" href="products.html">Curtainwall</a></li>
          <li><a tabindex="-1" href="products.html">All Glass Entrances</a></li>
          <li><a tabindex="-1" href="products.html">Storefronts</a></li>
          <li><a tabindex="-1" href="#">Skylights</a></li>
          <li><a tabindex="-1" href="#">Metal Wall Panels</a></li>
          <li><a tabindex="-1" href="#">Windows</a></li>
          <li><a tabindex="-1" href="#">Rainscreen Cladding </a></li>
          <li><a tabindex="-1" href="#">Custom Railings</a></li>
        </ul>
      </li>
      <li><a tabindex="-1" href="projects.php">Projects</a></li>
      <li><a tabindex="-1" href="contact.html">Contact</a></li>
    </ul>
  </div>
  <div id="SmallHeader"><img src="images/projects.jpg" width="747" height="85"></div>
  <div id="TitleHeader" class="HeaderText">&nbsp;Projects - 1140 Avenue of the Americas</div>  <div id="MContent"> 
    <center>
     <div id="Col1Div">
     <table width="90%" border="0">
     <tbody><tr><td rowspan="3" width="80%"><div align="center"><img src="ProjectImages/1-6.jpg" width="342" height="489"></div></td><td valign="top" width="20%"><table width="100%" border="0'"><tbody><tr><td center'="" width="50% &gt;&lt;div align="><a href="DisplayProject.php?ProjectID=1&amp;ImageNum=2"><img src="ProjectImages/Thumbs/1-2.jpg" width="78" height="78"></a></td><td center'="" width="50% &gt;&lt;div align="><a href="DisplayProject.php?ProjectID=1&amp;ImageNum=3"><img src="ProjectImages/Thumbs/1-3.jpg" width="78" height="78"></a></td></tr><tr><td center'="" width="50% &gt;&lt;div align="><a href="DisplayProject.php?ProjectID=1&amp;ImageNum=4"><img src="ProjectImages/Thumbs/1-4.jpg" width="78" height="78"></a></td><td center'="" width="50% &gt;&lt;div align="><a href="DisplayProject.php?ProjectID=1&amp;ImageNum=5"><img src="ProjectImages/Thumbs/1-5.jpg" width="78" height="78"></a></td></tr><tr><td center'="" width="50% &gt;&lt;div align="><a href="DisplayProject.php?ProjectID=1&amp;ImageNum=6"><img src="ProjectImages/Thumbs/1-6.jpg" width="78" height="78"></a></td><td width="50%">&nbsp;</td></tr></tbody></table></td></tr>    </tbody></table>
    </div>
    </center>
    <div id="ColDivSeperator">&nbsp;</div>
    <div id="Col2Div">
      <table width="100%" border="0">
	<tbody><tr><td colspan="2"><font size="3" color="#161E66"><b>1140 Avenue of the Americas</b></font><p><font size="3" color="#161E66"></font></p></td></tr><tr><td width="20%"><font size="2" color="#161E66"><b>Location:</b></font></td><td width="80%"><font size="2" color="#161E66">New York, NY</font></td></tr><tr><td><font size="2" color="#161E66"><b>Architect</b></font><b>:</b></td><td><font size="2" color="#161E66">Iu and Bibliowicz Architects, New York, Ny</font></td></tr><tr><td><font size="2" color="#161E66"><b>Contractor:</b></font></td><td><font size="2" color="#161E66">Enterprise Architectural Sales, Inc., New York, NY</font></td></tr><tr><td colspan="2"><font size="1.5" color="#161E66"><p>Currently under construction, 1140 Avenue of the Americas is a complex re-glazing project with 3 significant challenges:  The building is fully occupied, there is virtually no jobsite construction space, and the new structurally glazed skin system must accommodate sightlines through existing window openings.</p><p>
The Uni-Wall system was customized with T-section anchors which are being attached to the original steel structure of the building.  A 3D laser scan of the building was used to identify the exact location of the structure through two layers of brick.  AGT's 3D curtain wall models were then overlayed onto the building scan, to optimize the location of anchor receptors and to efficiently line up horizontal mullions with existing office window openings.</p><p>
The roof of the sidewalk bridge will provide the only available staging area for the job, and glazed units will be positioned using crabs on the 19th floor terrace.  All panels will be delivered in custom-designed, collapsible steel crates, which will be re-used throughout the delivery schedule.  The use of these crates will greatly reduce jobsite waste, and will contribute to the LEED certification of the project.</p></font><p><font size="1.5" color="#161E66">
A key design feature is the lighted southwest corner of the building, where custom-fabricated fly-by corners with intricate break-formed metal will conceal programmable lighting fixtures that allow for unique color and pattern changes. 
</font></p></td></tr><tr>    </tr></tbody></table>
     
    </div>
  </div>
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

Open in new window

0
 
nsteele84Author Commented:
Thanks
0
All Courses

From novice to tech pro — start learning today.