1 reply [Last post]
LookitsPuck
Offline
Regular
Last seen: 14 years 3 days ago
Joined: 2004-04-23
Posts: 15
Points: 0

Hey all!

I have your basic site that utilizes a container div, and inside the container div are 3 floating divs. Below is your basic HTML (please ignore the runat tags, this is ASP.NET):

OBX Vacations




var map = null;
var geocoder = null;

function initializeMap(latitude, longitude, address) {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(latitude, longitude), 13);

var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());

geocoder = new GClientGeocoder();
showAddress(address);
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
);
}
}

/*
var map = null;
var geocoder = null;

function initializeMap(latitude, longitude, address) {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(latitude, longitude), 13);

var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());

// Add the point for the address
var point = new GLatLng(latitude, longitude);
map.addOverlay(new GMarker(point));

geocoder = new GClientGeocoder();
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}*/

















And below is the CSS:

html, body { margin: 0px; font-family: Arial, Verdana, Tahoma, Times New Roman; font-size: 8pt; background-image: url(../images/bg_gradient.jpg); background-repeat: repeat-x; background-color: #ffffff; }

p
{
margin: 0px;
}

p.item
{
margin: 0px;
margin-bottom: 5px;
}

span.itemTitle
{
font-weight: bold;
padding-right: 10px;
}

span.error
{
font-weight: bold;
color: #ff0000;
}

/* Holds the entire site, will probably need to z-index it, to have AJAX popups */
#mainContainer
{
position: absolute;
width: 666px;
margin-left: -333px;
left: 50%;
z-index: 1px;
}

#mainLeft
{
float: left;
width: 24px;
height: 661px;
background-image: url(../images/left_portion.jpg);
background-repeat: no-repeat;
}

#mainMiddle, #mainMiddleHome
{
float: left;
width: 617px;
height: 661px;
}

#mainMiddle
{
background-image: url(../images/inner_gradient.jpg);
background-repeat: repeat-x;
}

#mainMiddleTop, #mainMiddleTopHome
{
width: 100%;
height: 100%;
}

#mainMiddleTop
{
background-image: url(../images/bg_upper2.jpg);
background-repeat: no-repeat;
}

#mainMiddleTopHome
{
background-image: url(../images/bg_upper_home.jpg);
background-repeat: no-repeat;
}

#mainRight
{
float: left;
width: 24px;
height: 661px;
background-image: url(../images/right_portion.jpg);
background-repeat: no-repeat;
}

#topRight, #upperNavigation, #topRight a, #upperNavigation a
{
color: #566772;
}

#topRight a, #upperNavigation a
{
text-decoration: none;
}

#topRight
{
height: 22px;
text-align: right;
padding-top: 5px;
padding-right: 5px;
}

#upperNavigation
{
text-align: center;
font-size: 10pt;
}

#upperNavigation span.item
{
margin-left: 75px;
}

#upperLinkBack
{
height: 47px;
}

#upperLinkBack div
{
float: left;
width: 180px;
height: 47px;
}

#content
{
margin-top: 110px;
padding-left: 10px;
padding-right: 10px;
}

.header, .header_sm, div.qsItemHolder, div.qsItemHolder a, div.footer, div.footer a, .propertyHeaderItem, .propertyHeaderItem_sm
{
color: #70797d;
}

.header, .propertyHeaderItem
{
font-weight: bold;
font-size: 12pt;
}

.header_sm, .propertyHeaderItem_sm
{
font-size: 8pt;
}

p.header, .propertyHeaderItem_sm
{
margin: 0px;
margin-bottom: 5px;
}

p.header_sm, .propertyHeaderItem
{
margin: 0px;
}

div.clear
{
clear: both;
}

#content div.column0
{
float: left;
width: 180px;
padding-right: 5px;
height: 20px;
}

#content div.column1
{
margin-left: 20px;
float: left;
width: 380px;
padding-left: 10px;
}

div.qsItemHolder
{
text-align: center;
font-size: 8pt;
margin-top: 5px;
margin-bottom: 5px;
}

div.qsItemHolder a
{
text-decoration: none;
font-weight: bold;
}

div.specialItem, div.specialItemSecond
{
float: left;
width: 85px;
height: 95px;
text-align: center;
margin-bottom: 10px;
}

div.specialItemSecond
{
margin-left: 5px;
}

div.specialItem a, div.specialItemSecond a
{
font-size: 8pt;
}

div.specialItem img, div.specialItemSecond img
{
border: 0px;
}

div.featuredItem
{
width: 390px;
}

div.featuredItemSpacer
{
margin-top: 5px;
margin-bottom: 5px;
}

div.featuredItem img
{
border: 0px;
}

div.featuredItem div.fi_column0
{
float: left;
width: 185px;
height: 130px;
}

div.featuredItem div.fi_column0 img
{
width: 180px;
height: 135px;
}

div.featuredItem div.fi_column1
{
float: left;
margin-left: 10px;
padding-top: 10px;
padding-right: 5px;
width: 190px;
height: 130px;
}

span.copyright
{
font-size: 8pt;
}

div.footer
{
text-align: center;
}

div.footer a
{
text-decoration: none;
}

div.about
{
margin-bottom: 20px;
}

div.footer_seperator
{
margin-bottom: 7px;
}

/* START Property Info page */
#column0_pi
{
width: 320px;
float: left;
}

#column1_pi
{
width: 245px;
float: left;
margin-left: 25px;
}

div.infoItem_pi
{
margin-bottom: 20px;
}

img.resultImage
{
width: 55px;
}

img.propertyImage, img.propertyImage2
{
width: 50px;
cursor: pointer;
}

img.propertyImage2
{
margin-left: 15px;
}

/* END Property Info page (/

/* Drop down lists/widgets */
.locations, .months, .days, .years
{
border: solid 1px black;
padding: 1px;
text-align: center;
}

.locations
{
width: 166px;
}

.months
{
width: 49px;
}

.days
{
width: 49px;
}

.years
{
width: 60px;
}

Now, the problem I have is if I use clear: both anywhere inside the content container, it'll clear my right container (you can see it's called mainRight as an ID in the stylesheet), and hence put it down after the majority of the site. How can I avoid this?

I've attached a screen shot for ya'll.


mod edit/<code> tags added/tph

AttachmentSize
screenshot.jpg53.51 KB
LookitsPuck
Offline
Regular
Last seen: 14 years 3 days ago
Joined: 2004-04-23
Posts: 15
Points: 0

I've attached the sample

I've attached the sample master page file for reference since my code was eaten. Smile

AttachmentSize
test.html 4.6 KB