SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member phpballer's Avatar
    Join Date
    Jan 2008
    Location
    Merrillville, IN
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout: What's Wrong

    Can someone take a look at this site and tell me why my #container doesn't extend beyond the #header. All of my divs are inside the #container. The site is www.soundofftravel.com. Here's the code.

    CSS

    Code:
    body {
    	background-color:#DDD;
    }
    
    #container {
    	background-color: #fff;
    	width: 908px; 
    	margin: auto;
    	padding:20px 26px 0px 26px; 
    	}
    
    .logo {background-image:url(images/logo.png); background-repeat: no-repeat; height: 114px; width: 316px;}
    
    /*Top Menu*/
    #navcontainer ul{
    	padding-left: 0px;
    	margin-left: 0px;
    	height:40px;
    	color: #fff;
    	float: left;
    	width: 100%;
    	background-image: url(images/images/navbkg_03.gif);
    	background-repeat:repeat-x;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:12px;
    	font-weight: normal;
    	text-transform: uppercase;
    	padding-top: 15px;
    }
    #navcontainer ul li {
    	display: inline;
    }
    
    #navcontainer ul li a
    {
    padding: 0.2em 1em;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid #FF6600;
    }
    
    #navcontainer ul li a:hover{
    	color: #FF6600;
    
    }
    
    /*Home Page*/
    
    #default #column1 {
    	margin-top:20px;
    	float: left;
    	width: 350px;
    	height: 500px;
    }
    #default #column2 {
    	margin-top:20px;
    	float: right;
    	width: 532px;
    	height: 401px;
    }
    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>Sound Off Travel &amp; Tours</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    </head>
    
    <body id="default">
    <div id="container">
        <div id="header">
          <div class="logo"></div>
          <div id="navcontainer">
            <ul id="navlist">
              <li><a href="#">Home</a></li>
              <li><a href="#">Group Travel</a></li>
              <li><a href="#">Vacations</a></li>
              <li><a href="#">Traveltainment</a></li>
              <li><a href="#">Cruises</a></li>
              <li><a href="#">Destination Weddings</a></li>
              <li><a href="#">Travelux</a></li>
              <li><a href="#">Follow Me TV</a></li>
            </ul>
          </div>
         </div>
            <img src="images/images/topbanners/home.jpg" alt="Rio 2016 Olympics Travel Package" width="908" height="119"/>
            
        <div id="column1">
              <table id="Table1" cellspacing="0" cellpadding="3" align="center" style="width: 345px;
        border: 1px solid #cccccc;">
        <tr>
            <td style="background: #ebebeb;" class="flfn">
                <input id="rbAir" onclick="ToggleTabs()" type="radio" checked="checked" value="rbAir"
                    name="Search" />
                Flight
            </td>
            <td style="background: #ebebeb;" class="flfn">
                <input id="rbHotel" onclick="ToggleTabs()" type="radio" value="rbHotel" name="Search" />
                Hotel
            </td>
            <td style="background: #ebebeb;" class="flfn">
                <input id="rbCar" onclick="ToggleTabs()" type="radio" value="rbCar" name="Search" />
                Car
            </td>
        </tr>
        <tr>
            <td colspan="3" style="background: #ebebeb; border-bottom: 1px solid #cccccc;" class="flfn">
                <input id="rbVacation" onclick="ToggleTabs()" type="radio" value="" name="Search" />
                Vacations
            </td>
        </tr>
        <tr id="tabAir">
            <td colspan="3">
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            <input id="rbRT" onclick="ToggleTripType()" type="radio" checked="checked" value="rbRT"
                                name="Air" />
                            <label for="rbRT" class="normalf">
                                Roundtrip
                            </label>
                        </td>
                        <td colspan="2">
                            <input id="rbOW" onclick="ToggleTripType()" type="radio" value="rbOW" name="Air" />
                            <label for="rbOW" class="normalf">
                                One Way
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            From:
                            <br />
                            <input class="lit" id="tbFrom" onblur="javascript:this.value = this.value.toUpperCase();"
                                maxlength="50" size="13" name="tbFrom" />
                        </td>
                        <td>
                            Depart:
                            <br />
                            <input class="lit" id="tbDTime" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                maxlength="10" size="10" name="tbDTime" />
                        </td>
                        <td>
                            Time:
                            <br />
                            <select class="lit" id="ddOBTime" name="ddOBTime">
                                <option value="1500" selected="selected">Any time</option>
                                <option value="0100">1am</option>
                                <option value="0200">2am</option>
                                <option value="0300">3am</option>
                                <option value="0400">4am</option>
                                <option value="0500">5am</option>
                                <option value="0600">6am</option>
                                <option value="0700">7am</option>
                                <option value="0800">8am</option>
                                <option value="0900">9am</option>
                                <option value="1000">10am</option>
                                <option value="1100">11am</option>
                                <option value="1200">12n</option>
                                <option value="1300">1pm</option>
                                <option value="1400">2pm</option>
                                <option value="1500">3pm</option>
                                <option value="1600">4pm</option>
                                <option value="1700">5pm</option>
                                <option value="1800">6pm</option>
                                <option value="1900">7pm</option>
                                <option value="2000">8pm</option>
                                <option value="2100">9pm</option>
                                <option value="2200">10pm</option>
                                <option value="2300">11pm</option>
                                <option value="0001">12am</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <a class="small" href="javascript:getAirportCode('tbFrom')">city/airport code </a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            To:
                            <br />
                            <input class="lit" id="tbTo" onblur="javascript:this.value = this.value.toUpperCase();"
                                maxlength="50" size="13" name="tbTo" />
                        </td>
                        <td id="tdReturnDate">
                            Return:
                            <br />
                            <input class="lit" id="tbRTime" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                maxlength="10" size="10" name="tbRTime" />
                        </td>
                        <td id="tdReturnTime">
                            Time:
                            <br />
                            <select class="lit" id="ddInTime" name="ddInTime">
                                <option value="1500" selected="selected">Any time</option>
                                <option value="0100">1am</option>
                                <option value="0200">2am</option>
                                <option value="0300">3am</option>
                                <option value="0400">4am</option>
                                <option value="0500">5am</option>
                                <option value="0600">6am</option>
                                <option value="0700">7am</option>
                                <option value="0800">8am</option>
                                <option value="0900">9am</option>
                                <option value="1000">10am</option>
                                <option value="1100">11am</option>
                                <option value="1200">12pm</option>
                                <option value="1300">1pm</option>
                                <option value="1400">2pm</option>
                                <option value="1500">3pm</option>
                                <option value="1600">4pm</option>
                                <option value="1700">5pm</option>
                                <option value="1800">6pm</option>
                                <option value="1900">7pm</option>
                                <option value="2000">8pm</option>
                                <option value="2100">9pm</option>
                                <option value="2200">10pm</option>
                                <option value="2300">11pm</option>
                                <option value="0001">12am</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <a class="small" href="javascript:getAirportCode('tbTo')">city/airport code</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Adults:
                            <br />
                            <select class="lit" id="ddAdult" name="ddAdult">
                                <option value="0">0</option>
                                <option value="1" selected="selected">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                        <td>
                            Children:
                            <br />
                            <select class="lit" id="ddChild" name="ddChild">
                                <option value="0" selected="selected">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                            </select>
                        </td>
                        <td>
                            Seniors:
                            <br />
                            <select class="lit" id="ddSenior" name="ddSenior">
                                <option value="0" selected="selected">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            Service Class:
                            <br />
                            <select class="lit" id="ddClass" name="ddClass">
                                <option value="1" selected="selected">Economy</option>
                                <option value="2">Business</option>
                                <option value="3">First</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            <a class="blue" href="http://www.farebuzz.com/Affiliates/Default.aspx?tabid=2087&FpAffiliate=SouOffTraB2C&caID=61854&FpSub=&">
                                Advanced Flight Search</a>
                        </td>
                        <td colspan="2" style="text-align: right;">
                            <a href="javascript:SearchNow()">
                                <img alt="Search Now" src="searchboxfiles/images/search.gif" style="border: 0px;" />
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="tabHotel" style="display: none">
            <td colspan="3">
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td colspan="2">
                            City:
                            <br />
                            <input class="lit" id="tbCity" onblur="javascript:this.value = this.value.toUpperCase();"
                                size="28" name="tbCity" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Check-in:
                            <br />
                            <input class="lit" id="tbChIn" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                size="10" name="tbChIn" />
                        </td>
                        <td>
                            Check-out:
                            <br />
                            <input class="lit" id="tbChOut" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                size="10" name="tbChOut" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Guests:
                            <br />
                            <select class="lit" id="ddGuest" name="ddGuest">
                                <option value="1" selected="selected">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            <a class="blue" id="hlAdvHotel" href="http://www.farebuzz.com/Affiliates/Default.aspx?tabid=2099&FpAffiliate=SouOffTraB2C&caID=61854&FpSub=&">
                                Advanced Hotel Search</a>
                        </td>
                        <td style="text-align: right;">
                            <a href="javascript:SearchNow()">
                                <img alt="Search Now" src="searchboxfiles/images/search.gif" style="border: 0px;" />
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="tabCar" style="display: none">
            <td colspan="3">
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td colspan="2">
                            Airport Code:
                            <br />
                            <input class="lit" id="tbAirp" onblur="javascript:this.value = this.value.toUpperCase();"
                                size="18" name="tbAirp" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a class="small" href="javascript:getAirportCode('tbAirp')">city / airport code</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Car Company:
                            <br />
                            <select class="lit" id="ddCar" name="ddCar">
                                <option value="Default" selected="selected">All Companies</option>
                                <option value="AC">ACE RENT A CAR</option>
                                <option value="AD">ADVANTAGE</option>
                                <option value="AF">AMERICAR</option>
                                <option value="AL">ALAMO RENT A CAR</option>
                                <option value="AO">ACO RENT A CAR</option>
                                <option value="AR">AUTORENT</option>
                                <option value="BL">RED AND BLUE</option>
                                <option value="CC">COUNTY CAR</option>
                                <option value="CO">CONTINENTAL RENT A CAR</option>
                                <option value="CV">CAPPS VAN RENTAL</option>
                                <option value="DS">DISCOUNT RENTALS</option>
                                <option value="EC">EUROPEAN CAR RES</option>
                                <option value="EE">EXOTICAR EXPRESS</option>
                                <option value="EI">IRISH CAR RENTAL</option>
                                <option value="EN">ECONO CAR</option>
                                <option value="EP">EUROPCAR</option>
                                <option value="ET">ENTERPRISE RENT A CAR</option>
                                <option value="EV">EXECUTIVE CAR RENTAL</option>
                                <option value="EZ">EZ RENT A CAR</option>
                                <option value="FX">FOX RENT A CAR</option>
                                <option value="HO">HOLIDAY RENT A CAR</option>
                                <option value="IA">INTERAMERICA</option>
                                <option value="IL">INTERLOCADORA</option>
                                <option value="LL">LOCALIZA RENT A CAR</option>
                                <option value="LM">LM CAR RENTAL</option>
                                <option value="MA">MAGIC RENT A CAR</option>
                                <option value="MI">MALONE CAR RENTAL</option>
                                <option value="ML">MERLIN CARS</option>
                                <option value="MW">MIDWAY RENT A CAR</option>
                                <option value="NF">NEW FRONTIER</option>
                                <option value="RR">RENT RITE CARS</option>
                                <option value="RT">ROUTES CAR RENTAL</option>
                                <option value="RY">ROYAL RENT A CAR</option>
                                <option value="SL">I.T.S. CAR RENTAL</option>
                                <option value="SV">USAVE AUTO</option>
                                <option value="SW">SOUTHWEST CAR RENTAL</option>
                                <option value="SX">SIXT AUTO</option>
                                <option value="TR">TRIANGLE RENT A CAR</option>
                                <option value="UN">UNIDAS</option>
                                <option value="US">US RENT A CAR</option>
                                <option value="VR">SPECIALTY VAN RENTALS</option>
                                <option value="WC">WESTCOAST RAC</option>
                                <option value="ZA">PAYLESS CAR RENTAL</option>
                                <option value="ZD">BUDGET RENT A CAR</option>
                                <option value="ZE">HERTZ RENT A CAR</option>
                                <option value="ZI">AVIS RENT A CAR</option>
                                <option value="ZL">NATIONAL CAR RENTAL</option>
                                <option value="ZP">PRACTICAL CAR RENTAL</option>
                                <option value="ZR">DOLLAR RENT A CAR</option>
                                <option value="ZT">THRIFTY CAR RENTAL</option>
                                <option value="ZU">AUTO EUROPE</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Pick-up:
                            <br />
                            <input class="lit" id="tbPick" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                size="10" name="tbPick" />
                        </td>
                        <td>
                            Time:
                            <br />
                            <select class="lit" id="tbTPick" name="ddInTime">
                                <option value="0100A">1am</option>
                                <option value="0200A">2am</option>
                                <option value="0300A">3am</option>
                                <option value="0400A">4am</option>
                                <option value="0500A">5am</option>
                                <option value="0600A">6am</option>
                                <option value="0700A">7am</option>
                                <option value="0800A">8am</option>
                                <option value="0900A">9am</option>
                                <option value="1000A">10am</option>
                                <option value="1100A">11am</option>
                                <option value="1200P" selected="selected">12pm</option>
                                <option value="0100P">1pm</option>
                                <option value="0200P">2pm</option>
                                <option value="0300P">3pm</option>
                                <option value="0400P">4pm</option>
                                <option value="0500P">5pm</option>
                                <option value="0600P">6pm</option>
                                <option value="0700P">7pm</option>
                                <option value="0800P">8pm</option>
                                <option value="0900P">9pm</option>
                                <option value="1000P">10pm</option>
                                <option value="1100P">11pm</option>
                                <option value="1200A">12am</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Drop-off:
                            <br />
                            <input class="lit" id="tbDrop" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                size="10" name="tbDrop" />
                        </td>
                        <td>
                            Time:
                            <br />
                            <select class="lit" id="tbTDrop">
                                <option value="0100A">1am</option>
                                <option value="0200A">2am</option>
                                <option value="0300A">3am</option>
                                <option value="0400A">4am</option>
                                <option value="0500A">5am</option>
                                <option value="0600A">6am</option>
                                <option value="0700A">7am</option>
                                <option value="0800A">8am</option>
                                <option value="0900A">9am</option>
                                <option value="1000A">10am</option>
                                <option value="1100A">11am</option>
                                <option value="1200P" selected="selected">12pm</option>
                                <option value="0100P">1pm</option>
                                <option value="0200P">2pm</option>
                                <option value="0300P">3pm</option>
                                <option value="0400P">4pm</option>
                                <option value="0500P">5pm</option>
                                <option value="0600P">6pm</option>
                                <option value="0700P">7pm</option>
                                <option value="0800P">8pm</option>
                                <option value="0900P">9pm</option>
                                <option value="1000P">10pm</option>
                                <option value="1100P">11pm</option>
                                <option value="1200A">12am</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            <a class="blue" id="hlAdvCar" href="http://www.farebuzz.com/Affiliates/Default.aspx?tabid=2105&FpAffiliate=SouOffTraB2C&caID=61854&FpSub=&">
                                Advanced Car Search </a>
                        </td>
                        <td style="text-align: right;">
                            <a href="javascript:SearchNow()">
                                <img alt="Search Now" src="searchboxfiles/images/search.gif" style="border: 0px;" />
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr id="tabVacation" style="display: none;">
            <td colspan="3">
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            From:
                            <br />
                            <input class="lit" id="tbFromVac" onblur="javascript:this.value = this.value.toUpperCase();"
                                maxlength="50" size="15" name="tbFromVac" />
                        </td>
                        <td>
                            Depart:
                            <br />
                            <input class="lit" id="txtDepartureDate" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                maxlength="10" size="15" name="txtDepartureDate" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a class="small" href="javascript:getAirportCode('tbFromVac')">city / airport code</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            To:
                            <br />
                            <input class="lit" id="tbToVac" onblur="javascript:this.value = this.value.toUpperCase();"
                                maxlength="50" size="15" name="tbToVac" />
                        </td>
                        <td>
                            Return:
                            <br />
                            <input class="lit" id="txtReturningDate" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                maxlength="10" size="15" name="txtReturningDate" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a class="small" href="javascript:getAirportCode('tbToVac')">city / airport code</a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="checkbox" onclick="ShowHotelDates();" name="cbkRequireSeprateHotelDates"
                                id="cbkRequireSeprateHotelDates" />
                            I only need a hotel for part of my trip.
                        </td>
                    </tr>
                    <tr id="vacHotelDates" style="display: none;">
                        <td>
                            Check-in:
                            <br />
                            <input class="lit" type="text" size="15" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                id="txtHotelCheckInDate" value="" name="txtHotelCheckInDate" />
                        </td>
                        <td>
                            Check-out:
                            <br />
                            <input class="lit" type="text" size="15" onfocus="showCalendar(this.id)" onclick="event.cancelBubble=true;showCalendar(this.id)"
                                id="txtHotelCheckOutDate" value="" name="txtHotelCheckOutDate" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Service Class:
                            <br />
                            <select class="apf" id="ddlFlightServiceClass" name="ServiceClass">
                                <option value="C">Economy</option>
                                <option value="B">Business</option>
                                <option value="F">First</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table class="darkf paddingTop" cellpadding="3" cellspacing="0">
                    <tr>
                        <td>
                            Rooms:
                        </td>
                        <td>
                            <select class="apf" id="ddlRoomCount" name="ddlRoomCount" onchange="OnVacationsRoomChange()">
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </td>
                        <td>
                            Adults:
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td class="txtSmall">
                            Room 1:
                        </td>
                        <td>
                            <select class="apf" id="ddlAdultsInRoom1" name="ddlAdultsInRoom1">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                    </tr>
                    <tr id="trVacationRoom2" style="display: none;">
                        <td>
                        </td>
                        <td class="txtSmall">
                            Room 2:
                        </td>
                        <td>
                            <select class="apf" id="ddlAdultsInRoom2" name="ddlAdultsInRoom2">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <table class="darkf paddingTop" cellspacing="0" cellpading="3" style="width: 100%;">
                    <tr>
                        <td>
                            <a class="blue" id="A1" href="http://www.farebuzz.com/Affiliates/Default.aspx?tabid=3994&FpAffiliate=SouOffTraB2C&caID=61854&FpSub=&">
                                Advanced Search</a>
                        </td>
                        <td style="text-align: right;">
                            <a href="javascript:SearchNow()">
                                <img alt="Search Now" src="searchboxfiles/images/search.gif" style="border: 0px;" />
                            </a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <link href="searchboxfiles/searchbox.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="searchboxfiles/calendar/calendar.js"></script>
    
    <script type="text/javascript">
    var air = document.getElementById("rbAir");
    var tabAir = document.getElementById("tabAir");
    
    var car = document.getElementById("rbCar");
    var tabCar = document.getElementById("tabCar");
    
    var hotel = document.getElementById("rbHotel");
    var tabHotel = document.getElementById("tabHotel");
    
    var vacation = document.getElementById("rbVacation");
    var tabVacation = document.getElementById("tabVacation");
    
    function ToggleTabs()
    {
        manageCompTabs();
    }
    
    function ToggleTripType()
    {
    	if (document.getElementById("rbOW").checked)
    	{
    		GetTag("tdReturnDate").style.visibility = "hidden";
    		GetTag("tdReturnTime").style.visibility = "hidden";		
    	}
    	else
    	{
    		GetTag("tdReturnDate").style.visibility = "visible";
    		GetTag("tdReturnTime").style.visibility = "visible";		
    	}
    }
    
    function getAirportCode(theTagID)
    {
    	var strUrl = "http://www.farebuzz.com/Affiliates/DesktopModules/Fareportal/Modules/Flight/AirportCode.aspx?frm=Form&textbox=" + theTagID;
    	window.open(strUrl,"AirportPicker","toolbar=no,status=no,resizable=no,scrollbars=yes,width=650,height=700,top=100,left=100");
    }
    
    function ShowHotelDates()
    {
        if (GetTag("vacHotelDates").style.display=="none")
        {
            GetTag("vacHotelDates").style.display="";
        }
        else
        {
            GetTag("vacHotelDates").style.display="none";
        }
    }
    
    function OnVacationsRoomChange()
    {
        if (GetTag("ddlRoomCount").value == "2")
        {
           GetTag("trVacationRoom2").style.display = "";
        }
        else
        {
            GetTag("trVacationRoom2").style.display = "none";
        }
    }
    
    window.onload = function window_loaded()
    {
    	manageCompTabs();
    
    	//set default dates
    	var fromDate = new Date();
    	var toDateDate = new Date();
    	fromDate.setDate(fromDate.getDate()+14);
    	toDateDate.setDate(toDateDate.getDate()+21);
    	SetDateObj("tbDTime",fromDate);
    	SetDateObj("tbRTime",toDateDate);
    	SetDateObj("tbChIn",fromDate);
    	SetDateObj("tbChOut",toDateDate);
    	SetDateObj("tbPick",fromDate);
    	SetDateObj("tbDrop",toDateDate);
    	SetDateObj("txtDepartureDate",fromDate);
    	SetDateObj("txtReturningDate",toDateDate);
    	SetDateObj("txtHotelCheckInDate",fromDate);
    	SetDateObj("txtHotelCheckOutDate",toDateDate);
    }
    
    function SetDateObj(objName,dateObj)
    {
    	document.getElementById(objName).value = (dateObj.getMonth()+1) + "/" + dateObj.getDate() + "/" + dateObj.getFullYear();
    }
    
    function manageCompTabs()
    {
    	if (air.checked)
    	{
    		tabAir.style.display = "";
    		tabCar.style.display = "none";
    		tabHotel.style.display = "none";		
    		tabVacation.style.display = "none";
    	}
    	if (car.checked)
    	{
    		tabAir.style.display = "none";
    		tabCar.style.display = "";
    		tabHotel.style.display = "none";		
    		tabVacation.style.display = "none";
    	}
    	if (hotel.checked)
    	{
    		tabAir.style.display = "none";
    		tabCar.style.display = "none";
    		tabHotel.style.display = "";
    		tabVacation.style.display = "none";
    	}
    	if (vacation.checked)
    	{
    		tabAir.style.display = "none";
    		tabCar.style.display = "none";
    		tabHotel.style.display = "none";
    		tabVacation.style.display = "";
    	}
    }
    
    function GetTag(tagId)
    {
        return document.getElementById(tagId);
    }
    
    function SearchNow()
    {
        var searchStr = "http://www.farebuzz.com/Affiliates/Default.aspx?tabid=2300&caID=61854&FpAffiliate=SouOffTraB2C&FpSub=";
    
        if (air.checked)
        {
            searchStr += "&from=" + GetTag("tbFrom").value 
                      + "&fromDt=" + GetTag("tbDTime").value
                      + "&fromTm=" + GetTag("ddOBTime").value 
                      + "&to=" + GetTag("tbTo").value
                      + "&toDt=" + GetTag("tbRTime").value 
                      + "&toTm=" + GetTag("ddInTime").value
                      + "&rt=" + GetTag("rbRT").checked 
                      + "&ad=" + GetTag("ddAdult").value
                      + "&ch=" + GetTag("ddChild").value 
                      + "&se=" + GetTag("ddSenior").value
                      + "&class=" + GetTag("ddClass").value;
        }
        else if (hotel.checked)
        {
            searchStr += "&to=" + GetTag("tbCity").value 
                      + "&fromDt=" + GetTag("tbChIn").value
                      + "&toDt=" + GetTag("tbChOut").value 
                      + "&ad=" + GetTag("ddGuest").value
                      + "&ht=";
        }
        else if (car.checked)
        {
            searchStr += "&to=" + GetTag("tbAirp").value 
                      + "&fromDt=" + GetTag("tbPick").value
                      + "&fromTm=" + GetTag("tbTPick").value 
                      + "&toDt=" + GetTag("tbDrop").value
                      + "&toTm=" + GetTag("tbTDrop").value 
                      + "&cr=" + GetTag("ddCar").value;
        }
        else if (vacation.checked)
        {
            searchStr = "http://www.farebuzz.com/Affiliates/Default.aspx?tabid=3994&caID=61854&FpAffiliate=SouOffTraB2C&FpSub=";
            
            searchStr += "&from=" + GetTag("tbFromVac").value 
                      + "&to=" + GetTag("tbToVac").value 
                      + "&dep=" + GetTag("txtDepartureDate").value 
                      + "&ret=" + GetTag("txtReturningDate").value
                      + "&svc=" + GetTag("ddlFlightServiceClass").value 
                      + "&rm=" + GetTag("ddlRoomCount").value
                      + "&r1a=" + GetTag("ddlAdultsInRoom1").value;
                     
            if(GetTag("ddlRoomCount").value == "2")
            {
                searchStr += "&r2a=" + GetTag("ddlAdultsInRoom2").value;
            }
            if(GetTag("cbkRequireSeprateHotelDates").checked)
            {
                searchStr += "&cin=" + GetTag("txtHotelCheckInDate").value 
                          + "&cout=" + GetTag("txtHotelCheckOutDate").value;
            }
        }  
        
        window.open(searchStr);
    }
    </script>
        </div>
    
        <div id="column2">
          <img name="" src="" width="534" height="403" alt="" />
        </div>
    </div>
      
    </body>
    </html>
    Last edited by Paul O'B; Sep 22, 2011 at 07:53. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't cleared your floats so the container collapses to zero height. Floats are removed from the flow so a container that holds only floats has zero height.

    Add overflow:hidden to make it recognise its floated children.

    Code:
    #container{overflow:hidden}


Bookmarks

Posting Permissions

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