Web Analytics Made Easy -
StatCounter Divs being cut-off by wrapper - CodingForum

Announcement

Collapse
No announcement yet.

Divs being cut-off by wrapper

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Divs being cut-off by wrapper

    ok.. so i have a main div which contains one div floated left (nav), and one right (content). There is also a footer (clear:both) which appears underneath

    when the main div is smaller than the nav div.. it is cutting off the nav div at the same level in which the main div ends..

    this is bad! as i am losing some of my nav..

    any ideas on how to fix this?

    i've tried a few methods:
    • overflow: auto
    • <br style='clear: both' />


    nothing sems to work.. any help would be greatly appreciated

  • #2
    Post your code. Without it, we'll just be guessing on how to help you.
    Music Around The World - Collecting tips, trade and want lists, album reviews, & more

    Comment


    • #3
      Here's the html (stripped right back obviously)



      Code:
      <div class="widthBrowser">
        <div class="minwidthBrowser">
          <div class="containerBrowser">
            <div class="contentBrowser">
            <!-- begin page content --> 
              <div id="masthead">
                <!-- Header Section --> 
                <!-- Login Section -->
                
                <div id="joinbar"> </div>
                
                <div id="globalNav"></div>
                <div id="secondNav"></div>
              </div>
              <div id="leftnav">
              </div>
      <div id="contentholder">
            </div>  
          </div>
        </div>
      </div>

      Comment


      • #4
        Don't strip things back. All factors play a part including CSS.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          ok you asked for it!

          here is the html / php
          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>
          <?php echo include_http_metas() ?>
          <?php echo include_metas() ?>
          <?php echo use_helper('Javascript') ?>
          <?php echo include_title() ?>
          
          
          <link rel="shortcut icon" href="/favicon.ico" />
          
          </head>
          <body>
          
          <!-- Set loading indicator -->
          <div id="indicator" style="display: none;">
            <?php echo image_tag('misc/loading.gif'); ?>
          </div>
          
          <!-- Set the minumum width to be 775px wide -->
          <div class="widthBrowser">
            <div class="minwidthBrowser">
              <div class="containerBrowser">
                <div class="contentBrowser">
                <!-- begin page content --> 
                  <div id="masthead">
                    <!-- Header Section --> 
                    <div class="header">
                      <div class="headerImage">
                        <div class="headerjpg"></div>
                        <div class="headerText">
                          <span class="headerTextWhite"></span><br /><br />
                          <span class="headerTextYellow"></span>
                        </div>
                      </div>
                    </div>
                    <!-- Login Section -->
                    
                    <div id="joinbar">
                       <?php include_component('components', 'join') ?>
                       <div id="login">
                          <?php include_component('components', 'login') ?>
                       </div>
                       <div id="accounts">
                         <?php include_component('components', 'accounts') ?>
                       </div>
                    </div>
                    
                    <div id="globalNav"><?php include_component('components', 'navtop') ?></div>
                    <div id="secondNav"><?php include_component('components', 'subnav') ?></div>
                  </div>
                  <div id="leftnav">
                    <?php include_component('components', 'leftnav') ?> 
                  </div>
                  <!--end navBar div -->
                  
                  <?php 
                  $contentpage = FALSE;
                  switch($sf_view->getContext()->getModuleName())
                  {
                    case 'home':
                      echo "<div id='homepage'>";
                      $contentpage = FALSE;
                    break;
                    
                    case 'racing':
                    case 'sport':
                      echo '<div id="contentholder">';
                      echo include_component('components', 'time');
                      
                      echo '<div id="bettingslip">';
                      
                      if($sf_user->getBetslipVisible() == 1)
                      {
                         echo include_component('components', 'bettingslip');
                      } 
                      else
                      {
                        if ($sf_user->isAuthenticated())
                        {
                          //////////////
                        }
                      }
                      echo '</div>';
                      $contentpage = TRUE;
                    break;
                    case 'results':
                      echo '<div id="contentholder">
                          ';
                          $contentpage = TRUE;
                    break;
                    default:
                      echo '<div id="contentholder">
                            <div id="textcontentholder">
                          ';
                          $contentpage = TRUE;
                    break; 
                  }
                  
                  ?><div id="content">
                      <?php if($sf_flash->has('cms_content')): ?>
                        <?php echo $sf_flash->get('cms_content') ?>
                      <?php endif ?>
                      <?php echo $sf_data->getRaw('sf_content') ?>
                    </div>
                  <?php if($contentpage==TRUE)
                  {
                    echo "</div>";
                  }
                  ?>
                </div>  
              </div>
            </div>
          </div>
          <?php echo include_component('components', 'footer')?>
          
          <?php 
           if($contentpage) { 
             echo javascript_tag("Rico.Corner.round('contentholder', {color : '#E1E1E1'});"); 
           }
          ?>
          
          </body>
          </html>

          here is the css that's relevant:

          Code:
          .widthBrowser {
          	width: 100%;
          	min-width:775px;
          	float:left;
            }
          
          .contentBrowser {
          	border:0px solid #c00;
          	padding:0px;
          }
          
          * html .minwidthBrowser {
          	border-left:775px solid #fff;
          
          
          }
          
          * html .containerBrowser {
          	margin-left:-775px;
          	position:relative;
          
          }
          
          /*\*/
          * html .minwidthBrowser, * html .containerBrowser {
          	height:1px;
          }
          /**/
          
          .ruleBrowser {
          	width:775px;
          	margin:1em 0;
          }
          
          #masthead{
          	padding: 0px 0px 0px 0px;
          	border-bottom: 1px solid #E1E1E1;
          	width: 100%;
          }
          
          #leftnav{
            z-index: 999;
          	float: left;
          	width: 219px;
          	margin-top: 4px;
          	padding: 0px;
          }
          
          #banners{
            float:right;
          	width: 330px;
          	padding-right: 10px;
          }
          
          #homepage{
            margin: 0px;
            margin-left:225px;
            padding: 0px;
            margin-top:8px;
          }
          
          #homecontent{
          	margin-left:0px;
          	margin-right:300px;
          }
          
          #contentholder{
          	margin-left:225px;
          	margin-top:10px;
          	margin-right:10px;
          	background-color: #E1E1E1;
          	padding: 0px;
          }

          basically...

          it should look like this:

          Code:
          ________________________
          |        |                           |
          |        |                           |
          |        |                           |
          |        |_________________|
          |        |                           |
          |_____|                           |
          |_______________________|
          
          but instead it looks like this:
          
          ________________________
          |        |                           |
          |        |                           |
          |        |                           |
          |_____|_________________|
          |                                    |
          |_____ _________________|
          Thanks!!!

          Comment


          • #6
            Yeah I asked for but I was hoping you would post the html AFTER it got to the client. How are we supposed to read php that is on YOUR server? I think posting the link to your site would be the better option at this point.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              trust me, the code thats generated is much harder to interpret! thats why i stripped it down to begin with...

              try - w w w . s p o ** r t s ** b e t . c o m . a u
              (obviously ignoring the **)

              It only happens in IE, and even then, only sometimes..

              Try and find an event where the left nav is longer than the contents..

              Comment


              • #8
                I went to this page
                /results/sport/StartDate/today/EndDate/today
                and I didn't see a problem. Can you post a link to a page where you see the problem?
                ||||If you are getting paid to do a job, don't ask for help on it!||||

                Comment


                • #9
                  try /sport/event/SportID/17/CompetitionPID/8958/RoundPID/4911/EventID/661884

                  see if you get it there..

                  what browser are you using?

                  Comment


                  • #10
                    Umm well you said the problem was in IE so wouldn't you think I was using IE? I see the problem now I think. The Racing nav seems to be just a link, the rest of it seems to be gone. I think this might be more of an ajax problem if in fact that is the problem you were asking about.
                    ||||If you are getting paid to do a job, don't ask for help on it!||||

                    Comment


                    • #11
                      here's a screen grab of it happening on my dev server...

                      Comment


                      • #12
                        i wasnt trying to insult your intelligence, just wanted to know what version you were using for my own benefit should something come up...


                        it could be an ajax problem, but there just doesnt seem to be any logic to it.. unless it's a css issue.. the whole overflow thing..

                        i'll disable rico and see what happens maybe..

                        Comment


                        • #13
                          and sure enough.. Rico is to blame

                          you don't happen to have any Rico experience do ya?

                          thanks for helping me out on this one...

                          Comment

                          Working...
                          X