#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    19
    Rep Power
    0

    How can I keep Tables, nested in <divs>, from collapsing when I shrink a browser win?


    Hi,

    I have designed a website home page, that's basic layout is to be used for the remainder of the site.
    At this time, the page is using <div> tags, stacked one on top of the other and so on. Inside of each <div> tag, I have tables.
    The tables each have at least two cells.

    The layout works but when I shrink or restore a browser window to a smaller size, the tables and their content begin collapsing and running down the page.

    How can I prevent this and with what attributes?

    Link to the website
    http://www.digiport.biz


    My HTML
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Integro IT Solutions LLC | Home</title>
    
    <!-- Link to page style sheet -->
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    
    <!-- JS Resources -->
    <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="js/slideshow.js" type="text/javascript"></script>
    
    
    </head>
    
    <body>
    
    
    
    <!-- Header Section -->
    <div class="header" align="center">
      <table width="52%" height="240" border="0">
        <tr bgcolor="#333333">
          <td width="46%" height="200" rowspan="2" valign="top" bgcolor="#000000"><img src="images/logo.jpg" width="397" height="233" alt="Logo" /></td>
          <td width="42%" align="left" valign="top" bgcolor="#000000"><img src="images/top_half.png" width="202" height="103" /></td>
          <td width="12%" align="left" valign="top" bgcolor="#000000"><img src="images/facebook.png" width="35" height="35" /><img src="images/twitter.png " width="35" height="35" /><img src="images/googleplus.png" width="35" height="35" /></td>
        </tr>
        <tr bgcolor="#333333">
          <td colspan="2" align="left" valign="bottom" bgcolor="#000000">
          
        <!-- Navigation Menu Items--> 
    	<ul>  
    	<li><a href="index.html">Home</a></li>
    	<li><a href="about.html">About</a></li>
    	<li><a href="voice_data.html">Voice/Data</a></li>
    	<li><a href="cctv.html">CCTV</a></li>
    	<li><a href="careers.html">Careers</a></li>
    	<li><a href="contect.html">Contact</a></li>
    	</ul>
    
    </td>
        </tr>
      </table>
    </div>
    
    <!-- Page Specific Content Section -->
    <div class="content" align="center">
      <table width="52%" height="412" border="0">
        <tr align="right" valign="middle" bgcolor="#333333">
          <td height="408" align="top" bgcolor="#252525">
          	<div id="slideshow" align="center">
            <img src="images/slides/sld1.jpg" alt="" class="active" width="100%" height="100%<h5></h5>"/>
            <img src="images/slides/sld2.jpg" alt="" width="100%" height="100%" />
            <img src="images/slides/sld3.jpg" alt="" width="100%" height="100%"/>
    </div>
    </td>
        </tr>
      </table>
      <p>&nbsp;</p>
    </div>
    
    <!-- Banner Section -->
    <div class="banner" align="center">
      <table width="52%" height="160" border="0">
    	<tr>
    	  <td width="30%" align="left" nowrap="nowrap"><h2>Now Offering</h2><h1 style="color: #CCC" >Computer Repair</h1>
       	  </td>
        			<td width="56%" align="left" valign="bottom">
                Integro is now offering repair services for all residential and commercial customers! With low rates and special offers on pickup and delivery, you'll never have to worry about shipping or packing up your equipment again. Just give us a call or send an email and we'll work out the details to tailor directly to your needs. Fast turnaround and quality work is the Integro way and we wouldn't change it for the world. Getting your computer fixed shouldn't be a chore or hassle, so give us a call and get back to business as usual!
               </td>
        	<td width="19%" align="center" bgcolor="#666666">
                
              <p>Submit</p>
    	      <h1>Service</h1>
              <h2 style="color:#CCC">Request</h2>
                
           </td>
      </tr>
    </table>
    </div>
    
    <!-- Additional Info Section -->
    <div class="info" align="center">
      <table width="52%" height="414" border="0">
        <tr>
          <td valign="top"><p>&nbsp;</p>
          <h2>Voice / Data</h2>
          <p>&nbsp;</p>
          <h2 style="color:#666"><strong>///////////////////////////////////////////////</strong></h2>
          <p>&nbsp;</p>
          <p><img src="images/voice_data_example.jpg" width="100%" height="133" /></p>
          <p>Our services for voice and data will keep your </p>
          <p>business functioning as smooth as possible</p></td>
          <td valign="top"><p>&nbsp;</p>
          <h2>About Us</h2>
          <p>&nbsp;</p>
          <h2 style="color:#666"><strong>///////////////////////////////////////////////</strong></h2>
          <p>&nbsp;</p>
          <p><img src="images/about_us_example.jpg" width="100%" height="136" /></p>
          <p>As a new and bright company, our fresh </p>
          <p>perspective on problem solving and customer as</p>
          <p> critical acclaim from numerous companies</p></td>
          <td valign="top"><p>&nbsp;</p>
          <h2>Careers</h2>
          <p>&nbsp;</p>
          <h2 style="color:#666"><strong>///////////////////////////////////////////////</strong></h2>
          <p>&nbsp;</p>
          <p><img src="images/careers_example.png" width="100%" height="138" /></p>
          <p>Our growing companies requires constant staffing. </p>
          <p>Opportunities await a click of the button</p></td>
        </tr>
      </table>
    </div>
    
    <!-- News Section -->
    <div class="news" align="center">
      <table width="40%" height="314" border="0">
        <tr>
          <td width="50%" align="left" valign="top"><span style="color: #CCC">
            
            <!-- Latest Events Section -->
            <h1 style="color: #CCC">Latest Events</h1>
            <hr align="left" width="75%" noshade="noshade">
            </span>
            
            <h2 style="color:#09F">Job Fair At Cisco Con 13</h2>
            <p>Hosted IN San Bernadina, CA</p>
            
            <hr align="left" width="75%" noshade="noshade">
            
            <h2 style="color:#09F">Network Workshop</h2>
            <p>Understanding the basics of cable configuration</p>
            
          </td>
          <td width="50%" align="left" valign="top">
            
            <!--Contacts Section -->
            <h1 style="color: #CCC">Contacts</h1>
            <hr align="left" width="75%" noshade="noshade">
            
            <p>&nbsp;</p>
            <p>2601 Mission St. San Francisco, CA 94110</p>
            <p>Tel: 123-456-7890</p>
            <p>Fax: 123-456-7890</p>
            <p>Mail: info@mysite.com</p></td>
        </tr>
      </table>
    </div>
    
    <!-- Footer Section -->
    <div class="footer" align="center">
      <table width="52%" height="71" border="0">
        <tr>
          <td width="44%"> 2013 Integro Solutions</td>
          <td width="56%">    <!-- Navigation Menu Items--> 
    	<ul>  
    	<li><a href="index.html">Home</a></li>
    	<li><a href="about.html">About</a></li>
    	<li><a href="voice_data.html">Voice/Data</a></li>
    	<li><a href="cctv.html">CCTV</a></li>
    	<li><a href="careers.html">Careers</a></li>
    	<li><a href="contect.html">Contact</a></li>
    	</ul></td>
        </tr>
      </table>
    </div>
    
    
    </body>
    </html>
    My CSS
    Code:
    /* Website Content Styles */
    
    
    /* Applies to all elements */
    body,td,th 
    {
    	color: #FFF;
    }
    body 
    {
    	background-color: #000;
    }
    
    h1,h2,h3,p,p1,p2
    {
    		line-height: 15%;
    }
    
    
    h1,h2,h3
    {
    	color: #09F;
    }
    
    table 
    {
        table-layout: fixed;
    	
    }
    
    
    /* Header Style */
    div.header
    {
    	height: 240px;
    	width: 100%;
    	
    
    }
    
    /*Main Content Style*/
    div.content
    {
    	height: 465px;
    	width: 100%;
    	background: #4B4B4B url(../images/box_shadow.png) bottom no-repeat;
    }
    
    
    /*Banner Section Style*/
    div.banner
    {
    	background-color: #252525;
    	height: 160px;
    	width: 100%;
    	
    }
    
    /*Info Section Style*/
    div.info
    {
    	height: 415px;
    	width: 100%;
    	background-color: #4B4B4B;
    }
    
    /*News Section Style*/
    div.news
    {
    	background-color: #252525;
    	height: 315px;
    	width: 100%;
    
    }
    
    /*Footer Style*/
    div.footer
    {
    	height: 75px;
    	width: 100%;
    }
    
    /*
    Extra feature styles
    ______________________
    Use this section to add styles for extra features. This will reserve the above sections specifically for page styles.
    */
    
    /*Slide Show Styles*/
    #slideshow {
        position:relative;
        height:350px;
    }
    
    #slideshow IMG {
    	position: absolute;
    	top: -29px;
    	left: 0;
    	right: 0;
    	z-index: 8;
    	height: 424px;
    }
    
    #slideshow IMG.active {
        z-index:10;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    
    /*Navigation menu Styles*/
    
    .nav ul
    {
    list-style-type:none;
    margin:4;
    padding:2;
    }
    a:link,a:visited
    {
    display:inline;
    font-weight:bold;
    color:#FFF;
    background-color:#4B4B4B;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color: #09F;
    color:#FFF;
    }
    li
    {
    display:inline;
    }
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    19
    Rep Power
    0

    Nevermind..how silly of me.


    Been a while since I've style an HTML page.

    It's in the CSS. I added a min-width attribute to all of my <div>'s and this kept them at a consistent size for the browser window, thus keeping their children from running out.

    I would like to figure out if there is a way to automatically set the min-width attribute to the size of the browser viewing the page.

    Here is my updated CSS.

    Code:
    /* Website Content Styles */
    
    
    /* Applies to all elements */
    body,td,th 
    {
    	color: #FFF;
    }
    body 
    {
    	background-color: #000;
    }
    
    h1,h2,h3,p,p1,p2
    {
    		line-height: 15%;
    }
    
    
    h1,h2,h3
    {
    	color: #09F;
    }
    
    
    
    /* Header Style */
    div.header
    {
    	height: 240px;
    	width: 100%;
    	min-width:1875px;
    	
    
    }
    
    /*Main Content Style*/
    div.content
    {
    	height: 465px;
    	width: 100%;
    	min-width: 1875px;
    	background: #4B4B4B url(../images/box_shadow.png) bottom no-repeat;
    }
    
    
    /*Banner Section Style*/
    div.banner
    {
    	background-color: #252525;
    	height: 160px;
    	width: 100%;
    	min-width: 1875px;
    	
    }
    
    /*Info Section Style*/
    div.info
    {
    	height: 415px;
    	width: 100%;
    	min-width: 1875px;
    	background-color: #4B4B4B;
    }
    
    /*News Section Style*/
    div.news
    {
    	background-color: #252525;
    	height: 315px;
    	width: 100%;
    	min-width: 1875px;
    
    }
    
    /*Footer Style*/
    div.footer
    {
    	height: 75px;
    	width: 100%;
    	min-width: 1875px;
    }
    
    /*
    Extra feature styles
    ______________________
    Use this section to add styles for extra features. This will reserve the above sections specifically for page styles.
    */
    
    /*Slide Show Styles*/
    #slideshow {
        position:relative;
        height:350px;
    }
    
    #slideshow IMG {
    	position: absolute;
    	top: -29px;
    	left: 0;
    	right: 0;
    	z-index: 8;
    	height: 424px;
    }
    
    #slideshow IMG.active {
        z-index:10;
    }
    
    #slideshow IMG.last-active {
        z-index:9;
    }
    
    /*Navigation menu Styles*/
    
    .nav ul
    {
    list-style-type:none;
    margin:4;
    padding:2;
    }
    a:link,a:visited
    {
    display:inline;
    font-weight:bold;
    color:#FFF;
    background-color:#4B4B4B;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color: #09F;
    color:#FFF;
    }
    li
    {
    display:inline;
    }
  4. #3
  5. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    You need to make your site responsive in order to avoid it from collapsing. There are bootstraps that can be used.

IMN logo majestic logo threadwatch logo seochat tools logo