Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Div layout problems.

Reply
Thread Tools

Div layout problems.

 
 
Ryan Knopp
Guest
Posts: n/a
 
      01-26-2007
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>

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      01-26-2007
In article
<(E-Mail Removed). com>,
"Ryan Knopp" <(E-Mail Removed)> wrote:

> 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>


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)

--
dorayme
 
Reply With Quote
 
 
 
 
Ryan Knopp
Guest
Posts: n/a
 
      01-26-2007
On Jan 26, 3:00 pm, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed). com>,
> "Ryan Knopp" <(E-Mail Removed)> wrote:
>
>
>
>
>
> > 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>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)
>
> --
> dorayme- Hide quoted text -- Show quoted text -


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.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-27-2007
In article
<(E-Mail Removed). com>,
"Ryan Knopp" <(E-Mail Removed)> wrote:

> > dorayme- Hide quoted text -- Show quoted text -

>
> 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.


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:

<div id="left">Left</div>
> > <div id="body">
> > <div id="map" />
> > </div>
> > <div id="bottom">Bottom</div>


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.

--
dorayme
 
Reply With Quote
 
BootNic
Guest
Posts: n/a
 
      01-27-2007
> Ryan Knopp <(E-Mail Removed)> wrote:
> news: (E-Mail Removed) om
> 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>

Style this should be yes?
[snip]
> </script>
> ...... < other html code not relevant > .....

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>
--
BootNic Saturday, January 27, 2007 3:44 AM

It is better to die on your feet than to live on your knees!
*Emiliano Zapata*




 
Reply With Quote
 
Ryan Knopp
Guest
Posts: n/a
 
      01-27-2007
BootNic wrote:
>> Ryan Knopp <(E-Mail Removed)> wrote:
>> news: (E-Mail Removed) om
>> 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>

> Style this should be yes?
> [snip]
>> </script>
>> ...... < other html code not relevant > .....

> 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>

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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
DataList inside a Grid Layout Panel (<DIV>) item layout problem Rick Spiewak ASP .Net 3 08-26-2003 04:22 AM



Advertisments