CSS Vertically Line Up Elements

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Vertically Line Up Elements

css, vertical, align

webstuck

5:17 pm on May 31, 2013 (gmt 0)

I am new to CSS and having an issue. You can see my sample page at <snip>. I am having a tough time getting the Google Plus Follow button and Google Search box on the top right of the page to vertically align with the top of the logo and site name on the top left of the page.

[edited by: bill at 2:54 am (utc) on Jun 1, 2013]
[edit reason] no links to your sites as per TOS [/edit]

webstuck

12:49 am on Jun 1, 2013 (gmt 0)

Thanks in advance for any help!

lucy24

1:27 am on Jun 1, 2013 (gmt 0)

You'll need to post the offending code-- NOT the whole thing! Only enough to demonstrate the error. People need to see the html and css as they existed at time of posting, not as they will exist next week or at some future time.

fwiw, I fed the URL to the w3 validator and got 75 errors and 9 warnings. Some warnings can be ignored, but I think this batch are genuine typos.

By constrast, the CSS comes through as squeaky-clean CSS3 with not so much as a warning.

So start by hammering the html into shape.

webstuck

1:43 am on Jun 1, 2013 (gmt 0)

Here is my CSS:

<style type="text/css" media="screen, print, projection">
a:link
{
color:#990000;
font-weight:bold;
}
a:visited
{
color:#990000;
}
body
{
background:white;
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
}
html
{
margin:0;
padding:0;
}
#wrap
{
margin:0 auto;
width:980px;
}
#header
{
}
#logo
{
float:left;
}
#site-name
{
}
#social
{
}
#google-search-and-newsletter
{
float:right;
padding:0 0 0 5px;
}
#google-plus
{
float:right;
}
#social-buttons
{
clear:both;
float:right;
}
#feedburner
{
}
#pinterest
{
padding:0 0 0 5px;
vertical-align:top;
}
#facebook-like
{
padding:0 0 0 5px;
}
#twitter
{
padding:0 0 0 5px;
}
#nav
{
background:#ffcccc;
clear:both;
text-align:center;
}
#nav ul
{
list-style:none;
margin:0;
padding:0;
}
#nav li
{
display:inline;
margin:0;
padding:0;
}
#sidebar
{
float:left;
}
#main
{
float:left;
padding:10px;
width:400px;
}
h1
{
color: #CC6666;
font-weight:bold
}
#nav-category-links
{
float:right;
margin:0 0 0 5px;
}
#footer
{
clear:both;
text-align:center;
}
#footer p
{
margin:0;
}
* html #footer
{
height:1px;
}
#copyright
{
font-size:10px;
}
</style>

and here is the HTML that is not lining up correctly:

<div id="header">
<span id="logo">
<a href="http://www.example.com/"><img src="http://www.example.com/images/RSstickcouple.jpg" border="0" height="67" width="70"></a>
</span>
<span id="site-name">
<a href="http://www.example.com/"><img src="http://www.example.com/images/examplelogo-36pxh.png" alt="exampleck.com" border="0" height="30" width="297"></a><br>
The glue that holds your example together!
</span>
<div id="social">
<div id="google-search-and-newsletter">

<form action="http://www.google.com" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-3412735816916817:xxxxxxxxxx" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" value="Search" size="21" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>


<form action="http://www.getxxxxse.com/cgi-bin/add.cgi" method="post" id="GRSubscribeForm" accept-charset="UTF-8">
<label for="GRCategory3"></label>
<input type="text" name="category3" size="12" id="GRCategory3" value="Email Address" onfocus="if(this.value=='Email Address')this.value='';" onblur="if(this.value=='')this.value='Email Address';">
<input type="submit" value="Join Newsletter">
<input type="hidden" name="category1" value="examplenewsletter">
<input type="hidden" name="confirmation" value="http://www.example.com/newsletterresult.htm">
<input type="hidden" name="ref" value="000">
<input type="hidden" name="getpostdata" value="get">
</form>

</div>
<div id="google-plus">

<div class="g-plus" data-width="170" data-height="69" data-href="//plus.google.com/xxx0759116433212593" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

</div>
<br>
<div id="social-buttons">
<span id="feedburner">

<a href="http://feeds2.feedburner.com/examplecomFeaturedContent"><img src="http://www.romancestuck.com/images/rss-hearticon.jpg" height="18" width="57" border="0"></a>

</span>
<span id="pinterest">

<a data-pin-do="buttonFollow" href="http://pinterest.com/example/">example</a>

</span>
<span id="facebook-like">

<div class="fb-like" data-href="http://www.facebook.com/example" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" ref="like_button"></div>

</span>
<span id="twitter">

<a href="https://twitter.com/example" class="twitter-follow-button" data-show-count="true" data-width="150px" data-show-screen-name="false">Follow </a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

</span>
</div>
</div>
</div>

Thanks!

[edited by: bill at 2:58 am (utc) on Jun 1, 2013]
[edit reason] use example.com for URLs [/edit]