Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need two column boxes that are the same size

    Hello,

    I am trying to set up a two column section in the main section of my site. Each box has a different amount of text. I would like to get all boxes to have the same width and height, even when resized.

    The page can be found at http://students.depaul.edu/~sakel/Trading_Tools.htm

    As you can see, the boxes don't match up in width and height, nor do they stay the same size when resizing the browser window. For the actual content boxes, I used a method that does not use images. I tried wrapping the boxes in a 100% width table and having each <td> have a 50% (or less) width each.

    Below is the CSS used for the content boxes. Any help would be appreciated. The problem may be as simple as altering the tables. I doubt it has anything to do with the CSS for the boxes, as they work just fine when having a one column layout.

    /* Rounded Boxes for About Us Page - Blue */

    .b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
    .b1h {height:1px; background:#aaa; margin:0 5px;}
    .b2h, .b2bh {height:1px; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
    .b3h, .b3bh {height:1px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
    .b4h, .b4bh {height:2px; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
    .b2bh, .b3bh, .b4bh {background: #325C74;}
    .headh {background: #fff; border-right:1px solid #aaa; border-left:1px solid #aaa;}
    .headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
    .contenth {background: #236B8E; color: #fff; font-size: 0.7em; line-height: 1.7em; font-family: Verdana, Arial; border-right:1px solid #aaa; border-left:1px solid #aaa; padding-left: 10px; padding-right: 12px; padding-top: 8px;}
    .contenth div {padding-left: 2px; padding-right: 2px; padding-top: 2px;}

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    Code:
    .contenth {background:  #236B8E; color: #fff; font-size: 0.7em; line-height: 1.7em; font-family: Verdana, Arial; border-right:1px solid #aaa; border-left:1px solid #aaa; padding-left: 10px; padding-right: 12px; padding-top: 8px; min-height:100px;}
    Then on this html take off the margin-top to make them look aligned

    Code:
    <div style="margin-top: 30px;" class="boxcontainer">
    
    <b class="b1h"/>
    <b class="b2h"/>
    <b class="b3h"/>
    <b class="b4h"/>
    <div class="headh">
    <h3 class="platform">
    E-Calendar
    </h3>
    </div>
    
    <div class="divider"/>
    <div style="background-color: rgb(240, 248, 255); color: rgb(0, 0, 0);" class="contenth">
    Get the latest futures information with our Electronic Futures Calendar.<div class="boxlink"><a class="boxlink_alt" target="_blank" href="#">Click to learn more</a></div>
    </div>

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That one line fixed it right up for both IE and FF. It always seems like my layout issues have to do with leaving out min-height.

    Thanks jc!

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello again,

    I previously tested in IE 7 and FF2 and the site was fine, but I am now having display problems for this on IE 6. Below is a link for the screenshot when viewed in IE6 (used browsershots.org since I don't have IE 6 installed).

    http://students.depaul.edu/~sakel/screenshot.png

    Website: http://students.depaul.edu/~sakel/Trading_Tools.htm

    The E-Calendar box is not the same size as all the others. Also, the second row of boxes no longer has the padding and is too close to the footer. And finally, there is a gap between the tiled image I used and the right content area.

    This is the CSS that pertains to the header image and the repeated image:

    .tradingtoolsbg
    {
    background: url(tradingtoolsbg.jpg);
    background-repeat: repeat-x;
    width: 100&#37;;
    }

    .bg
    {
    background: url(researchbg.jpg);
    background-repeat: repeat-x;
    width: 100%;
    }

    Again, any help would be greatly appreciated. Thanks!

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Try JavaScript. This works like a charm, and I have tested it across multiple browsers.

    Don't use tables for this, as they are now depreciated HTML. Use two divs, and use CSS to place them next eachother. Set each div with the class="equal".

    Place this JavaScript in your head section.

    Code:
    matchColumns=function(){ 
         var divs,contDivs,maxHeight,divHeight,d; 
         divs=document.getElementsByTagName('div'); 
         contDivs=[]; 
         maxHeight=0;  
         for(var i=0;i<divs.length;i++){  
              // make collection with <div> elements with class attribute "equal"
              if(/\bequal\b/.test(divs[i].className)){ 
                    d=divs[i]; 
                    contDivs[contDivs.length]=d;  
                    if(d.offsetHeight){ 
                         divHeight=d.offsetHeight; 					
                    } 
                    else if(d.style.pixelHeight){ 
                         divHeight=d.style.pixelHeight;					 
                    } 
                    maxHeight=Math.max(maxHeight,divHeight); 
              } 
         } 
         for(var i=0;i<contDivs.length;i++){ 
              contDivs[i].style.height=maxHeight + "px"; 
         } 
    }  
    window.onload=function(){ 
         if(document.getElementsByTagName){ 
              matchColumns();			 
         } 
    }
    Last edited by macwiz; 07-16-2008 at 08:13 AM.

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For this particular site, the client would like to stay away from Javascript. Is there another way to get these to display properly? Tables are fine for this, since I use them sparingly.

    If there is an IE 6 fix for this, that would be great. Or maybe another way to fix it using CSS...

  • #7
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    here is the IE6 hack for min-height

    Code:
    selector {/*this is the name of your class or id*/
      min-height:500px;/*you can change this to whatever you need on both*/
      height:auto !important;
      height:500px;
    }
    _______________________

    as far as the back ground for the header dont use 100&#37; for an image, it will only show the 100% of the size not the actual div

    Code:
    .tradingtoolsbg
    { 
    background: url(tradingtoolsbg.jpg);
    background-repeat: repeat-x;
    width: 100%; 
    }
    
    .bg 
    {
    background: url(researchbg.jpg);
    background-repeat: repeat-x;
    width: 100%; 
    }


    i suppose you will just need to add padding to the top of your footer, not sure why it got lost


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •