Layout Issue

[jdigs]

i realize this may be a little lengthy with the code pasted in, but it was bothering the heck out of me as i couldnt figure this out so wanted to ask...

i've got a simple header with a left and right float (leftLogo and rightLogo) and the same for the main body (leftSide and rightSide). the issue came in when i tried to make the logos linkable. i even ensured their space didn't encroach over the header, but the floats in main (leftSide and rightSide) are still being pushed down roughly 20 pixels into main div and are not floating all the way to main's top div line. that's the issue, what the heck did i do?!

<div id="wrapAll">
  <div id="headWrapper">
    <div id="leftLogo">
      <h3><a href="index.html">MySite</a></h3>
    </div>
    <div id="rightLogo">
      <h3><a href="index.html">MySite</a></h3>
    </div>
    <div id="headerSpace">
      <p>Requests&nbsp;Advertising&nbsp;Contact Us</p>		    
    </div>
    <!-- end div headerspace -->
    <span class="clear"></span> 
    </div>
    <!-- end div headwrapper -->
  <div id="mainWrapper">
    <div id="leftSide">
      <p>Current List</p>
    </div>
    <div id="rightSide">
      <p>Current #</p>
    </div>
    <div id="main">
      <!--I've got a google custom search box here w h1 heading -->
    </div>
    <!-- end main -->
    <span class="clear"></span> </div>
  <!-- end mainWrapper -->
</div>
<!-- end wrapAll -->

css:
body, html {
	margin: 0px;
	padding: 0px;
	height: 100%;
}
p {
	
	font-size: 14px;
}
h3 {
	height: 22px; /*match to leftLogo height*/
	
}

h3 a{
	display:block;
	line-height:22px; /*match to h3 height*/
} 

#leftLogo {
	float: left;
	width: 16%;
	height: 22px;
}

#rightLogo {
	float: right;
	width: 16%;
         height: 22px;
}

#headerSpace {
	
	margin-right: auto;
	margin-left: auto;
         height: 22px;
}


#headWrapper {

	width: 100%;
}
#leftSide {
	width: 16%;
	float: left;
	padding-top: 5px;
	padding-bottom: 2px;
}

#rightSide {
	float: right;
	width: 16%;
	padding-top: 5px;
	padding-bottom: 2px;
}
#main {
	height: 100%;
}
#cse-search-box {
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 25%;
}



#mainWrapper {
	height: 90%;
}
#wrapAll {
	height: 100%;
}

[Lusiphur]

when i tried to make the logos linkable

Did you set the border to 0 on your logos? If you don't have a border="0" statement in your logo image source html then what will happen is you will get a padded border around your logos when you make them into an URL link. This might explain the inexplicable 20px shift of your content.

Hope that helps :)

Edit: However, it looks as though you're applying the hyperlink to text and not image so I'm not really sure what would be doing it... If they were images my above explanation would be worth looking at :P

[jdigs]

Did you set the border to 0 on your logos? If you don't have a border="0" statement in your logo image source html then what will happen is you will get a padded border around your logos when you make them into an URL link. This might explain the inexplicable 20px shift of your content.

Hope that helps :)

Edit: However, it looks as though you're applying the hyperlink to text and not image so I'm not really sure what would be doing it... If they were images my above explanation would be worth looking at :P

the way it's working is that the whole blocks (leftLogo and rightLogo) are clickable/linked to index.html. tried setting the borders and that didn't alter anything :( i then tried removing the entire google custom search box area out of curiosity and that seemed to fix things. not sure why this would do it? as you can see in the css, the search box is set to width 40% with auto left and right margin. strange, no? tricky html/css...

[Lusiphur]

Well I'm glad it's solved... but again if the entire box is clickable as a link I still think that it's related to the fact that converting something to a hyperlink tends to add a border spacing to it that expands it's size... not sure how to combat that on non-image links however.

Don't forget to mark your threads solved once you've found the solution though :) And good luck.

[jdigs]

right but it's not solved! dunno how this search box is affecting it...the words technology and frustration just never go together for me :)

[jdigs]

i think you're right that it is these logo boxes that are causing the issue as all was working fine before i decided to put in this new code with them, but no idea how it's doing it, wish i knew

[macgurl70]

I am not sure, so going to double check - it reads where the logos are the divs and not a graphic image. If it is an actual image - try taking it out of the div, give the id to the actual image and have just the artwork itself in the header div. Also try, instead of float, having the top, left and right positioning set at 0.

If there is nothing in the div box, it won't show up - making the other elements fall into place like you wanted them to. However, once you put in the text it then gave the div box something to display. Making them appear larger - when most likely they just were not showing up yet.

You could also try making their height 100% - not sure since I have not seen the page - but it should keep them within the current div.

[prixat]

I think its the H3 headings you're using.
You have no control over how much space a browser will add before and after them!

Also, you've got a <P> in the 'headerspace' div which is pushing the whole site down.

You'll have a similar problem with the search box if you use H1!

Best not to use them in confined spaces and just create your own heading styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body, html {
	margin: 0px;
	padding: 0px;
	height: 100%;
}
p {
	font-size: 14px;
}
h3 {
	vertical-align: top;
	text-align: center;
}
h3 a{
	display:block;
	line-height:22px; /*match to h3 height*/
} 
#leftLogo {
	float: left;
	width: 16%;
	height: 22px;
	background: #99CC33;
}
#rightLogo {
	float: right;
	width: 16%;
	height: 22px;
	background: #99CCFF;
}
.logoalign {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	vertical-align: top;
	line-height:22px;
}
#headerSpace {
	margin-right: auto;
	margin-left: auto;
	height: 22px;
	background: #CC6699;
	font-size: 14px;
}
#headWrapper {
	width: 100%;
}
#leftSide {
	width: 16%;
	float: left;
	padding-top: 5px;
	padding-bottom: 2px;
	background: #FF9999;
}
#rightSide {
	float: right;
	width: 16%;
	padding-top: 5px;
	padding-bottom: 2px;
	background: #FF66CC;
}
#main {
	height: 100%;
}
#cse-search-box {
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 25%;
}
.clear { clear: both; }
#mainWrapper {
	height: 90%;
}
#wrapAll {
	height: 100%;
}
-->
</style>
</head>

<body>

<div id="wrapAll">
  <div id="headWrapper">
    <div id="leftLogo" class="logoalign"><a href="index.html">MySite</a></div>
    <div id="rightLogo" class="logoalign"><a href="index.html">MySite</a></div>
    <div id="headerSpace">Requests&nbsp;Advertising&nbsp;Contact Us</div>
    <!-- end div headerspace -->
<!--    <div class="clear"></div>-->
  </div>
    <!-- end div headwrapper -->
  <div id="mainWrapper">
    <div id="leftSide"><p>Current List</p></div>
    <div id="rightSide"><p>Current #</p></div>
    <div id="main">
      I've got a google custom search box here w h1 heading
    </div>
    <!-- end main -->
<!--    <div class="clear"></div>-->
  </div>
  <!-- end mainWrapper -->
</div>
<!-- end wrapAll -->

</body>
</html>