Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

How do I get two vertical divs to be even?

Question posted by: Jim (Guest) on June 27th, 2008 07:19 PM
I'm trying to build a simple 3 panel web page and don't seem to be able
to get the two panels that are side by side the same length. The left
one is shorter.

The web site is: http://jim.lynch.name/testa.html

The css is embedded and is at the front of the file.

Any hints would be much appreciated.

Jim.
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
dorayme's Avatar
dorayme
Guest
n/a Posts
June 27th, 2008
07:19 PM
#2

Re: How do I get two vertical divs to be even?
In article <Q3U6k.11388$s77.9007@bignews3.bellsouth.net>,
Jim <k4gvo@bellsouth.netwrote:
Quote:
Originally Posted by
I'm trying to build a simple 3 panel web page and don't seem to be able
to get the two panels that are side by side the same length. The left
one is shorter.
>
The web site is: http://jim.lynch.name/testa.html
>
The css is embedded and is at the front of the file.
>
Any hints would be much appreciated.
>


Instead of your:

..Container {...}
div.Navigation {... background-color:#e0e0e0}
div.Content {...}


put


..Container {... background:#e0e0e0;}
div.Navigation {...}
div.Content {... background: #fff;}

There are other things wrong but this should fix your immediate concern.

--
dorayme

Jim's Avatar
Jim
Guest
n/a Posts
June 27th, 2008
07:19 PM
#3

Re: How do I get two vertical divs to be even?
dorayme wrote:
Quote:
Originally Posted by
In article <Q3U6k.11388$s77.9007@bignews3.bellsouth.net>,
Jim <k4gvo@bellsouth.netwrote:
>
Quote:
Originally Posted by
>I'm trying to build a simple 3 panel web page and don't seem to be able
>to get the two panels that are side by side the same length. The left
>one is shorter.
>>
>The web site is: http://jim.lynch.name/testa.html
>>
>The css is embedded and is at the front of the file.
>>
>Any hints would be much appreciated.
>>

>
Instead of your:
>
.Container {...}
div.Navigation {... background-color:#e0e0e0}
div.Content {...}
>
>
put
>
>
.Container {... background:#e0e0e0;}
div.Navigation {...}
div.Content {... background: #fff;}
>
There are other things wrong but this should fix your immediate concern.
>

Looks good, thanks. Now what else did you spot that my simple test
hasn't caught? :)

Thanks,
Jim.

dorayme's Avatar
dorayme
Guest
n/a Posts
June 27th, 2008
07:19 PM
#4

Re: How do I get two vertical divs to be even?
In article <_L47k.11716$s77.10825@bignews3.bellsouth.net>,
Jim <k4gvo@bellsouth.netwrote:
Quote:
Originally Posted by
dorayme wrote:
Quote:
Originally Posted by
In article <Q3U6k.11388$s77.9007@bignews3.bellsouth.net>,
Jim <k4gvo@bellsouth.netwrote:
Quote:
Originally Posted by
I'm trying to build a simple 3 panel web page and don't seem to be able
to get the two panels that are side by side the same length. The left
one is shorter.
>
The web site is: http://jim.lynch.name/testa.html
>
The css is embedded and is at the front of the file.
>
Any hints would be much appreciated.
>


Instead of your:

.Container {...}
div.Navigation {... background-color:#e0e0e0}
div.Content {...}


put


.Container {... background:#e0e0e0;}
div.Navigation {...}
div.Content {... background: #fff;}

There are other things wrong but this should fix your immediate concern.

Looks good, thanks. Now what else did you spot that my simple test
hasn't caught? :)
>


Well, how about putting a doctype on your html? Try:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Instead of

<span style="height: 100%; float: left; margin-left: 5px; display:
inline; font-size: 16px;">
<p>
<a href="#">Home</a>
<br><a href="about.html">About</a>
<br><a href="projects.html">Projects</a>
<br><a href="links.html">Links</a>
</p>
</span>

Try:

<div class="Navigation">
<ul>
<li>Home</a>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>

and then go into your CSS sheet and style this as you like with out
bullets, not so far right, etc.

There are other things.

Your white heading "Pacific Coast Highway" is in trouble, see what
happens when you enlarge text. The danger of sitting size variable thing
in a px based box. In IE6, you got away with it because basing the text
on 40px as you have makes IE6 keep it at that! In other browsers, your
instruction is ignored and it is treated as an em able to be changed at
the users command.

In my opinion, this is a good thing! All browsers should be like this.
Authors then could use text for headings like they use pics. Of course,
disaster would ensue but that would force authors never to use px for
fonts unless there was a reasonable need for it.

In the meantime, consider just making it part of the pic in an image
editor and be done. Another possibility is this, add to your title class
this to give the text a bit more room to vary:
....
display: block;
position: relative;
bottom: 50px; right: 100px;
}

and while you are at it, go to the HTML and make the words:

Pacific&nbsp;Coast&nbsp;Highway

Get rid of the line:

div.Header {width:100%; text-align:center;border: 5px solid red;}

That's it for now. beckoning is a swim at Little Bay, a walk along
Botany Bay with a nice big friendly dog, dinner at a good fish cafe
overlooking the bay and like that...

Jesus! I have practically told my enemies where they can find and knock
me off. But be careful. The dog is very protective of me - he won't be
fed till it goes dark and he is no vegetarian. One of the ways it is
easy to tell that something is meat is if it is live and moves. Carrots
don't do that.

--
dorayme

Jim's Avatar
Jim
Guest
n/a Posts
June 27th, 2008
07:19 PM
#5

Re: How do I get two vertical divs to be even?
dorayme wrote:
Quote:
Originally Posted by
In article <_L47k.11716$s77.10825@bignews3.bellsouth.net>,
Jim <k4gvo@bellsouth.netwrote:
>
Quote:
Originally Posted by
>dorayme wrote:
Quote:
Originally Posted by
>>In article <Q3U6k.11388$s77.9007@bignews3.bellsouth.net>,
>> Jim <k4gvo@bellsouth.netwrote:
>>>

(snip)
Quote:
Originally Posted by
Pacific&nbsp;Coast&nbsp;Highway
>
Get rid of the line:
>
div.Header {width:100%; text-align:center;border: 5px solid red;}
>
That's it for now. beckoning is a swim at Little Bay, a walk along
Botany Bay with a nice big friendly dog, dinner at a good fish cafe
overlooking the bay and like that...
>
Jesus! I have practically told my enemies where they can find and knock
me off. But be careful. The dog is very protective of me - he won't be
fed till it goes dark and he is no vegetarian. One of the ways it is
easy to tell that something is meat is if it is live and moves. Carrots
don't do that.
>

Lol! Dorayme, thanks a bunch for the advice. You're just paranoid, no
one wants to knock you off. You're too valuable!

Jim.

 
Not the answer you were looking for? Post your question . . .
183,965 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors