Div layout problems.

R

Ryan Knopp

So here's what i want.
I want the bottom div to be like a footer. The problem i'm having it
seems is the map div. The map div is a huge huge map of 65000px by
65000px that scrolls around with javascript (think google maps). Now
Left div, map div and body div all work the way i want them. But i
can't get the bottom div on the bottom of both of them.

Left Div Body Div



f o o t e r d i v


kind of like my layout above. It seems like the map div is
interfering with it somehow. If i comment out the map div the page
works correctly. Any Ideas or suggestions? I kind of want to do this
with out either fixed or absolute positioning.


<script>
#left{
float : left;
width : 150px;
}
#map{
position : relative;
left : 0px;
top : 0px;
}
#body{
overflow : hidden;
position : relative;
}
#bottom{
clear : both;
}
</script>
....... < other html code not relevant > .....
<div id="left">Left</div>
<div id="body">
<div id="map" />
</div>
<div id="bottom">Bottom</div>
 
D

dorayme

"Ryan Knopp said:
So here's what i want.
I want the bottom div to be like a footer. The problem i'm having it
seems is the map div. The map div is a huge huge map of 65000px by
65000px that scrolls around with javascript (think google maps). Now
Left div, map div and body div all work the way i want them. But i
can't get the bottom div on the bottom of both of them.

Left Div Body Div



f o o t e r d i v


kind of like my layout above. It seems like the map div is
interfering with it somehow. If i comment out the map div the page
works correctly. Any Ideas or suggestions? I kind of want to do this
with out either fixed or absolute positioning.


<script>
#left{
float : left;
width : 150px;
}
#map{
position : relative;
left : 0px;
top : 0px;
}
#body{
overflow : hidden;
position : relative;
}
#bottom{
clear : both;
}
</script>
...... < other html code not relevant > .....
<div id="left">Left</div>
<div id="body">
<div id="map" />
</div>
<div id="bottom">Bottom</div>
Click to expand...

Why the position: relative or overflow? Try it without these
lines but put a left margin on #body (btw. slightly confusing
name given <body> for html) to match the width of the left nav
(plus a few px perhaps, or some padding for grace)
 
R

Ryan Knopp

lines but put a left margin on #body (btw. slightly confusing
name given <body> for html) to match the width of the left nav
(plus a few px perhaps, or some padding for grace)
Click to expand...

position : relative and overflow : hidden, are there so the huge
6500px by 6500 px map div tag inside the body tag doesn't overlap the
left div tag.
So pretty much what the purpose of the body tag is the hold the movable
(by javascript) map div tag so it doesn't over lap the other div tags.
Does that made sense? If i place the left div inside the body div the
map div will overlap it when i move it around. It's like google maps
with the left nav, the map in the middle and then a bottom footer (but
google maps doesn't have a bottom footer). The problem i'm getting is
placing the bottom div under the body and left div tag.
Does that explain things better? Thanks for you help.
 
D

dorayme

"Ryan Knopp said:
position : relative and overflow : hidden, are there so the huge
6500px by 6500 px map div tag inside the body tag doesn't overlap the
left div tag.
So pretty much what the purpose of the body tag is the hold the movable
(by javascript) map div tag so it doesn't over lap the other div tags.
Does that made sense? If i place the left div inside the body div the
map div will overlap it when i move it around. It's like google maps
with the left nav, the map in the middle and then a bottom footer (but
google maps doesn't have a bottom footer). The problem i'm getting is
placing the bottom div under the body and left div tag.
Does that explain things better? Thanks for you help.
Click to expand...

Please quote the relevant bits to which you are replying. I have
lost the proper flow of words.

With no url, harder to say what your problem is: I can't imagine
putting up such a huge image for the web (quite unwise) but maybe
you are doing clever things and not putting up the whole thing at
once.

Anyway, keeping it simple. Why can't you have a left float, a
right content div with a left margin set on this for the float to
"sit in", the div will expand to fit the content. If it is a huge
pic, scrollbars will come up. "Clear" the next div and it will be
the footer. Have you tried doing what I said before? What
actually happens? Why is Bob not your uncle?

You imagine you are telling us the essential story but honestly,
before Korpela gets on to you (he is asleep now, it is very cold
in Iceland and I am his deputy sherrif) we better sort this out.
Either give a url with a real gif that is, say, 6000px square
(make a plain colour one) - don't you dare use yours, it is too
big. And give the real code.

Consider dropping the things I said to drop. What is the extra
div #map doing exactly? to connect up with the JS?

Anyway, you say:


I suggest:

<http://members.optushome.com.au/droovies/knopp/test.html>

Some of the dims are only to exhibit colours for the example. You
would not need to be putting in heights. Take a look at this in
Firefox or Safari or any good browser. For IE 6 and below, some
adjustments may be needed.
 
B

BootNic

Ryan Knopp said:
news: (e-mail address removed)
So here's what i want.
I want the bottom div to be like a footer. The problem i'm having it
seems is the map div. The map div is a huge huge map of 65000px by
65000px that scrolls around with javascript (think google maps). Now
Left div, map div and body div all work the way i want them. But i
can't get the bottom div on the bottom of both of them. [snip]
<script>
Click to expand...
Style this should be yes?
[snip]
</script>
...... < other html code not relevant > .....
Click to expand...
Perhaps Doctype is relevant?
[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
* html .box {
display: inline-block; /* trigger haslayout for < ie7 */
}
..bottom {
background-color: rgb(0, 255, 0);
}
..box {
background-color: rgb(0, 0, 255);
overflow: hidden;
}
..contentleft {
background-color: rgb(255, 255, 0);
float: left;
width: 150px;
}
..contentmain {
background-color: rgb(255, 0, 0);
margin: 0;
padding-left: 165px;
}
..contentmain p:first-child,
..contentleft p:first-child {
margin-top: 0;
}
..contentmain p:last-child,
..contentleft p:last-child {
margin-bottom: 0;
}
</style>
</head>

<body>
<div class="box">
<div class="contentleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam elit nibh, adipiscing sit amet, tincidunt accumsan,
lobortis at, velit.</p>
</div>

<div class="contentmain">
<p>Proin ac sapien ac nibh aliquam placerat. Maecenas sed est
ut pede tincidunt luctus. Nullam in ante. Duis in dolor.
Pellentesque ac metus vitae mi placerat euismod. Fusce semper
auctor leo. Vivamus et nunc sed quam tincidunt posuere.</p>
</div>
</div>

<div class="bottom">
Bottom Div
</div>
</body>
</html>
 
R

Ryan Knopp

BootNic said:
news: (e-mail address removed)
So here's what i want.
I want the bottom div to be like a footer. The problem i'm having it
seems is the map div. The map div is a huge huge map of 65000px by
65000px that scrolls around with javascript (think google maps). Now
Left div, map div and body div all work the way i want them. But i
can't get the bottom div on the bottom of both of them. [snip]
<script>
Click to expand...
Style this should be yes?
[snip]
</script>
...... < other html code not relevant > .....
Click to expand...
Perhaps Doctype is relevant?
[snip]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
* html .box {
display: inline-block; /* trigger haslayout for < ie7 */
}
.bottom {
background-color: rgb(0, 255, 0);
}
.box {
background-color: rgb(0, 0, 255);
overflow: hidden;
}
.contentleft {
background-color: rgb(255, 255, 0);
float: left;
width: 150px;
}
.contentmain {
background-color: rgb(255, 0, 0);
margin: 0;
padding-left: 165px;
}
.contentmain p:first-child,
.contentleft p:first-child {
margin-top: 0;
}
.contentmain p:last-child,
.contentleft p:last-child {
margin-bottom: 0;
}
</style>
</head>

<body>
<div class="box">
<div class="contentleft">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam elit nibh, adipiscing sit amet, tincidunt accumsan,
lobortis at, velit.</p>
</div>

<div class="contentmain">
<p>Proin ac sapien ac nibh aliquam placerat. Maecenas sed est
ut pede tincidunt luctus. Nullam in ante. Duis in dolor.
Pellentesque ac metus vitae mi placerat euismod. Fusce semper
auctor leo. Vivamus et nunc sed quam tincidunt posuere.</p>
</div>
</div>

<div class="bottom">
Bottom Div
</div>
</body>
</html>
Click to expand...
I had the doctype just left it out, didn't think it was relevant. Here
it is. <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Trying to keep it at strict xhtml.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning CSS components 1
Clickable Div Block 1
Having difficulty with the layout of these images / video for this web page 2
Help with my responsive home page 2
How to position the *tooltip* comment on these buttons? 9
How can I add arrows to my FAQ 0
Why is the e.target not working here? 1
Help with Visual Lightbox: Scripts 2

Members online

Total: 22 (members: 2, guests: 20)
Robots: 511

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top