Help with positioning

griffyboy0 posted this at 18:01 — 2nd April 2005.

Joined: Mar 2005

I have one div called footertextwrapper which should hold 2 other div tags called footertext and footeremail

footeremail is an email link which is an image.

------------------------------
         Footer text|   email|
------------------------------

But, when I call the other 2 divs, it looks like this:

------------------------------
          Footertext| [blank]|
------------------------------
     email|           [blank]|
------------------------------

how do I get the code to work the way I want it to?

I've spent a day and a half trying to get this to work.

Heres my css:

div#footertext {
height: 52px;
width: 494px;
background-image: url(images/Wrapper/FooterText.gif);
display: block;
z-index: 0;
}

div#footertextwrapper {
height: 52px;
width: 525px;
z-index: 0;
background-color: blue;
}

div#footeremail {
width: 31px;
height: 52px;
background-color: black;
z-index: 0;
display: inline;
}

and my html

    <div id="footertextwrapper">
      <div id="footertext"></div>   
      <div id="footeremail">
	<a href="mailto:[email protected]"><img src="images/Wrapper/Email.gif" border="none"></a>
      </div>
    </div>

Please help!

-griff

bja888 (not verified) posted this at 21:57 — 2nd April 2005.

They have: 5,633 posts

Joined: Jan 1970

Well the first thing that pops out to me is your css. There are 4 ways to name a class.
A tag... div{width: 31px; height: 52px;}'
A class... .anything{width: 31px; height: 52px;}'
A layer... #layer{width: 31px; height: 52px;}'
You combined all 3. I think that will for sure cause some type of error.

griffyboy0 posted this at 23:03 — 2nd April 2005.

They have: 10 posts

Joined: Mar 2005

alright, I changed my css to the following:

.footertext {
height: 52px;
width: 494px;
background-image: url(images/Wrapper/FooterText.gif);
display: block;
}

.footertextwrapper {
height: 52px;
width: 525px;
background-color: black;
}

.footeremail {
width: 31px;
height: 52px;
background-color: black;
display: inline;
}

and my html to

    <div class="footertextwrapper">
      <div class="footertext"></div>   
      <div class="footeremail">
	<a href="mailto:[email protected]"><img src="images/Wrapper/Email.gif" border="none"></a>
      </div>
    </div>

Still does the same thing... What could be wrong?

-griff

could it have anything to do with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

at the top of my document?

bja888 (not verified) posted this at 00:54 — 3rd April 2005.

They have: 5,633 posts

Joined: Jan 1970

OH! you cannot put DIV tags right next to each other. Try and use SPAN insted for the 2 small parts not the wrapper.

griffyboy0 posted this at 01:12 — 3rd April 2005.

They have: 10 posts

Joined: Mar 2005

How do I do that?

Sorry, I'm really new to this kind of thing...

-griff

bja888 (not verified) posted this at 02:01 — 3rd April 2005.

They have: 5,633 posts

Joined: Jan 1970

    <div class="footertextwrapper">
      <SPAN class="footertext"></SPAN>   
      <SPAN class="footeremail">
	<a href="mailto:[email protected]"><img src="images/Wrapper/Email.gif" border="none"></a>
      </SPAN>
    </div>

griffyboy0 posted this at 02:15 — 3rd April 2005.

They have: 10 posts

Joined: Mar 2005

alright. That works.

I also found that this works too, for anybody else is having the same problem, and doesn't want to use span tags.

.footertext {
height: 52px;
width: 494px;
background-image: url(images/Wrapper/FooterText.gif);
float: left;
}

.footertextwrapper {
width: 525px;
background-color: black;
display: block;
position:relative;
height: 0px;
}

.footeremail {
width: 31px;
height: 52px;
background-color: black;
float: right;
}

and in the html:

    <div class="footertextwrapper">
      <div class="footertext"></div>   
      <div class="footeremail">
         <img src="images/Wrapper/Email.gif" border="none"></a>
      </div>
    </div>

Thanks!

-griff