1 reply [Last post]
Drue
Drue's picture
Offline
newbie
Last seen: 8 years 40 weeks ago
Timezone: GMT-5
Joined: 2012-09-01
Posts: 1
Points: 2

I'm working on a website. My total width is 64em (1024px). Next I have a google map widget that is 18.75em (300px) in height and and auto width.

Underneath the widget are three boxes. I'm new to CSS and I'm having trouble with getting the left and right box on the edge and equal spacing in between. I'm trying the boxes similar to this website. I'm not keeping the color scheme. I was messing around with opacity.

Anyone know how to get this?

<div class="content_frame">
    	<?php include('includes/header.php');  ?>
        <?php include('includes/nav_bar.php'); ?>	
		<?php include('includes/maps.php'); ?>
		<div class="info_rollover" id="red_square">
        	<h2>Red Square</h2>
            <img name="red_square" src="" width="200" height="200" alt="red_square" />
        </div>
 
        <div class="info_rollover" id="blue_square">
        	<h2>Blue Square</h2>
            <img name="blue_square" src="" width="200" height="200" alt="green_square" />
        </div>
 
        <div class="info_rollover" id="green_square">
        	<h2>Green Square</h2>
            <img name="green_square" src="" width="200" height="200" alt="green_square" />
        </div>
      </div>

CSS

@charset "utf-8";
body {
 
	background-color:#373737
}
/* CSS Document */
 
.content_frame
{
	width: 64em;
	margin: 1.5em auto;
	border: 0.063em solid;
	background-color:#0033CC;
	border-radius: 10px;
 
}
 
#background
{
	background-image: url(../Images/gradient_02.gif);
	background-repeat: repeat-x;
	background: #fff;
	text-align: left;
	overflow: hidden;
	opacity: .4;
	filter:alpha(opacity=40);
}
 
#text
{
	background-color:#0033CC;
}
 
#header {
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #009;
	background-image: none;
	background-attachment: fixed;
	background-color: #FF480F;
	background-repeat: no-repeat;
	background-position: center center;
}
#title_header {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-style: oblique;
	font-weight: bold;
	font-variant: normal;
	text-align: center;
}
 
#mapCanvas
{
	width: auto;
	height: 18.75em;
 
 
}
 
 
 
.info_rollover
{
	float: left;
	display: block;
	width: 18.75em;
	height: 18.75em;
	overflow: hidden;
	margin-left: 25px;
	margin-right: 25pxx;
}
 
.info_rollover img
{
	display: block;
	margin: 0 auto 2em;
	border-style:dashed;
	border-width: medium;
}
 
.info_rollover h2
{
	text-align:center;
}
#red_square
{
 
	background-color:#A70303;
}
 
#blue_square
{
 
	background-color:#3333CC;
}
 
#green_square
{
	background-color:#006600;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Drue,First up you have an

Hi Drue,
First up you have an error in your stylesheet
margin-right: 25pxx;
validating may find others.

You are mixing EM's widths with pixel values for margins, much easier to work with one or the other.