8 replies [Last post]
paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

I am trying to position to DIV's on the same level as each other. Here is the link

If you look at the bottom of the page... there is the #footer which has the following code:

<div id="footer">
  <div id="validate">
	<div class="w3cbutton3">
	  <a href="http://validator.w3.org/check/referer" rel="external" >
		<span class="w3c">W3C</span>
		<span class="spec">XHTML 1.0</span>
	  </a>
	</div>
	<div class="w3cbutton3">
	  <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.techsatcomputers.com/styles/styles5.css" rel="external">
		<span class="w3c">W3C</span>
		<span class="spec">CSS</span>
	  </a>
	</div>
  </div>
  <div id="copyright">
  
  </div>
</div>

#footer has 2 nested DIV's one of which is #validate and the other is #copyright. #validate is left position to 0 and I am trying to position the #copyright section to the right of the #validate DIV.

Here is the CSS:

#footer {
	background-color: #CCCCCC;
	background-attachment: scroll;
	background-image:  url(../images/portal/footer.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	border-top: 3px solid #333333;
	border-bottom: 1px solid #333333;
	margin: 0px;
	padding: 0px;
	height: 70px;
	width: 100%;
	left: 0px;
/*	text-align: right;*/
	color: #666666;
}

#validate {
	margin: 0px 0px 0px 10px;
	padding: 0px;
	height: 70px;
	width: 150px;
	left: 0px;
	background-color: #FFFFFF;
	clear: right;
}


#copyright {
	margin: 0px;
	padding: 0px;
	height: 70px;
	width: 450px;
	right: 0px;
	background-color: #FFFFFF;
	float: right;
}

I must be doing something stupid here as you can see I clearly don't understand what float:right and clear:right does Sad

http//melbourne.ug.php.net

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Positioning two DIV's on the same level

If you unfloated the copyright DIV, it'd appear underneath the validate DIV. So when you float it, it just moves it right.

You either need to float the validate DIV left, or declare the copyright DIV first, then they'll line up.

clear:right will place the DIV below any right-floated DIVs. Given that there aren't any, it's superflouous there, so might as well be removed.

Not sure I explained the top bit right, may try again tomorrow... but the solutions should work.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Positioning two DIV's on the same level

Thanks that worked !! Laughing out loud

http//melbourne.ug.php.net

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Positioning two DIV's on the same level

I'm back :? with some more problems. Its the same footer area again. I managed to position the Validate links and the Copyright links on the same level but have a few margin issues. First the page. I have given a white background color to see the area of the 2 DIV's in discussion.

The HTML:

<!-- ################### START of FOOTER Area ##################### -->
<div id="footer">
  <!--************ START of Validation Area -->  
  <div id="validate"> 
    <div class="w3cbutton3">
	  <a href="http://validator.w3.org/check/referer" rel="external" > 
        <span class="w3c">W3C</span> <span class="spec">XHTML 1.0</span>
	  </a> 
	</div>
    <div class="w3cbutton3"> 
	  <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.techsatcomputers.com/styles/styles5.css" rel="external"> 
        <span class="w3c">W3C</span> <span class="spec">CSS</span> 
	  </a>
	</div>
  </div>
  <!--************ END of Validation Area -->    
  
  <!--************ START of CopyRight Area -->  
  <div id="copyright">
    <p>
      <a name="pbottom" id="pbottom"></a><strong>Techs at Computers Development</strong><br />
	  Copyright & 2003 Techs at Computers Development Team. All Rights Reserved
    </p>
    <address>
      <span class="pipe">| </span><a href="#" class="bottom">Style Sheet</a><span class="pipe"> | </span><a href="mailto:[email protected]"  class="bottom">General E-Mail</a><span class="pipe"> | </span><a title="Move to top of page" href="#ptop" class="bottom">Top of Page</a><span class="pipe"> |</span>
    </address>
  </div>
  <!--************ END of CopyRight Area -->
  
</div>
<!-- ################### END of FOOTER Area ##################### -->

The CSS:
/* ############################ Start Footer Styling ##########################*/
#footer {
	background-color: #CCCCCC;
	background-attachment: scroll;
	background-image:  url(../images/portal/footer.jpg);
	background-repeat: repeat-x;
	background-position: center center;
	border-top: 3px solid #333333;
	border-bottom: 1px solid #333333;
	margin: 0px;
	padding: 0px;
	height: 70px;
	width: 100%;
	left: 0px;
	color: #666666;
}

#validate {
	position: relative;
	margin: 0px 0px 0px 10px;
	padding: 0px;
	height: 70px;
	width: 150px;
	left: 0px;
	background-color: #FFFFFF;
	float: left;
}


#copyright {
	margin: 0px;
	padding: 0px;
	height: 70px;
	width: auto;
	right: 0px;
	background-color: transparent;
	float: right;
	text-align: right;	
}

#copyright p {
	margin: 8px 12px 12px 8px; 
	font-size: 10px;
	background-color: #FFFFFF;
}

span.pipe {		/* to give the gap between links*/
	display: none;
}

#footer #copyright a.bottom {  	/* to give a right margin of 3 pixels */
	margin: 0 3px 0 0;
}
#footer #copyright a.bottom, #footer #copyright a.bottom:visited {		/*To give the default styles for the footer links */
	color: #666666;
	padding: 2px 8px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	text-decoration: none;
}

#footer #copyright a.bottom:hover, #footer #copyright a.bottom:active {		/* To give the hover/active styles for the footer links */
	color: #333333;
	background-color: #B4BBD8;
	border: 1px solid #FFFFFF;
}

#footer #copyright address {
	font-size: 10px;
	margin: 0 9px 0 0;
	padding: 0px;
}

/* ############################ End Footer Styling ##########################*/

Now for the problems.

Under IE 6 the #validate DIV gives me a left margin of 20px when only 10px is specified.(not a big issue but I am trying to figure out why and maybe it would help me later on)

Under Netscape 6 and all Mozilla Browsers, the #validate DIV gets pushed down by 10px.

Under Opera6 there is a 10px margin at the very end of the page.

Opera 7.11 is the only browser which has not problems whatsoever.

I have attached some screen shots for the problematic browsers. Hope you can help me out :roll:

http//melbourne.ug.php.net

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Positioning two DIV's on the same level

Opera 7.11 screen shot attached

http//melbourne.ug.php.net

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Positioning two DIV's on the same level

That IE6 thing is weird. I'll try to have a look at that one tomorrow. However a lack of browsers means I can't really help on the others - hope others here can lend a hand.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Positioning two DIV's on the same level

anybody else :roll:

http//melbourne.ug.php.net

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 45 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Positioning two DIV's on the same level

It's just my personal tomorrow. Which is a non-normal interpretation. Ok so I lost the thread on the site... #-o

Anyway in IE6 it's to do with it being floated. It seems (for whatever strange reason) that when it's floated, it doubles the margin. That's just the fact, I have no idea why it does this.

The only workaround I could find was to move the Validation DIV below the Copyright DIV and unfloat it. Still appears in the right place, but with the correct margin. I have no idea what effect that will have in other browsers.

Hope that people with other browsers can help out... 'fraid I'm away this weekend so no chance of me getting round to installing more.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

paCkeTroUTer
paCkeTroUTer's picture
Offline
Enthusiast
Melbourne, Australia
Last seen: 6 years 30 weeks ago
Melbourne, Australia
Timezone: GMT+10
Joined: 2003-06-27
Posts: 241
Points: 2

Positioning two DIV's on the same level

Finally got some break-through with this problem of mine. Thanks to ASURA and his post [url]http://www.csscreator.com/css-node/321url]

http//melbourne.ug.php.net