Menu
I have a problem with a layout - it's not online anywhere, just local, but if you copy and paste the code below into an html page and run it locally you will see the same page I do.
It's very nearly there. What I'm trying to achieve is a page with no scrollbars using up all available vertical space. Yes, I can set "overflow:hidden" on the container declaration and that helps, but it's not quite right. I want to actually have the google map surrounded with a 1em border. I have this on 3 sides but the 100% height declaration on the content div crashes the bottom border. If you don't realise the implications of a percentage-sized google map div, then the parent HAS to have a height declared for it to work. As the footer is absolute and outside of the flow, there is no "bottom" border to work to and the layout just doesn't work. The content div 100% height basically seems to take its size from the viewport and not the containing div.
It's driving me mad... just can't seem to work out how to do this and I'd really appreciate some input.
Start here:
<!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><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content
{
float:left;
width:70%;
height:100%; /* fill that hole! */
border-right:1px solid #ccc;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent
{
height:100%;
margin: 1em;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="header2">
<p>Secondary menu...</p>
</div>
<div id="rightCol">
<div id="headerInternal2">
<p>Right Header</p>
</div>
<p class="paddedContent">This is the right column</p>
</div>
<div id="content">
<div id="headerInternal">
<p>Page Context Menu</p>
</div>
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div id="footer">
<p>This footer is absolutely positioned</p>
</div>
</div>
</div>
</body>
</html>
362
Google Maps has a "Share or embed map" feature that provides users with the map's HTML code so that they can insert it into their website's code. You can embed a map view image, a street view image, or even specific directions for a route.
You can also add Google Maps to your site's widget section, like the sidebar or footer. To start, head over to Appearance » Widgets from your WordPress admin panel. Next, click the '+' button and add the 'AIOSEO Local – Map' widget block where you'd like to display your location.
Alas, I've got it working. do the following changes.
1) Since the footer is out of the flow , bring it ouside div#content and put it after it.
2) change the css of div#content as follows
div#content{
border-right:1px solid #CCCCCC;
bottom:0;
float:left;
overflow:hidden;
padding-bottom:108px;
margin-top:148px;
position:absolute;
top:0;
width:70%;
}
NOTE: The padding top and padding bottom will be fixed as your headers and footers have fixed height. This will fail if they have percentage values as well!
3)Change the css of div#container
div#container{
background:none repeat scroll 0 0 #FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
height:100%;
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
width:960px;
}
Only overflow:hidden is added.
Here is the entire page:-
<!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><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
background:none repeat scroll 0 0 #FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
height:100%;
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
width:960px;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content{
border-right:1px solid #CCCCCC;
bottom:0;
float:left;
overflow:hidden;
padding-bottom:108px;
margin-top:148px;
position:absolute;
top:0;
width:70%;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent
{
height:100%;
margin: 1em;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="header2">
<p>Secondary menu...</p>
</div>
<div id="rightCol">
<div id="headerInternal2">
<p>Right Header</p>
</div>
<p class="paddedContent">This is the right column</p>
</div>
<div id="content">
<div id="headerInternal">
<p>Page Context Menu</p>
</div>
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div id="footer">
<p>This footer is absolutely positioned</p>
</div>
</div>
</body>
</html>
@Katsuri, Thanks for your solution, it works great!
But for others who wants to have a left fixed-sized column and a Gmap div filling the entire right space, here is my code modified from Katsuri's:
live example: http://jsfiddle.net/EZbfN/ source 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>
<title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
div#container {
height:100%;
width:100%;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
}
div#header {
height:50px;
position:relative;
}
div#leftCol {
left:0;
bottom:0;
top:0;
overflow:hidden;
padding-bottom:35px;
margin-top:55px;
position:absolute;
width:300px;
}
div#content {
right:0;
bottom:0;
top:0;
left: 300px;
overflow:hidden;
padding-bottom:35px;
margin-top:55px;
position:absolute;
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:20px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
.paddedContent {
height:100%;
margin: 5px;
border: solid 1px red;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="leftCol">
<div class="paddedContent">This is the left column</div>
</div>
<div id="content">
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</div>
<div id="footer">
This footer is absolutely positioned
</div>
</div>
</body>
</html>
Enjoy!
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
