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 Advertising 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%;
}