Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Vertically Line Up Elements

css, vertical, align

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

10+ Year Member



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]

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

10+ Year Member



Thanks in advance for any help!
1:27 am on Jun 1, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
1:43 am on Jun 1, 2013 (gmt 0)

10+ Year Member



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">
<!-- GOOGLE SEARCH - START -->
<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&amp;lang=en"></script>
<!-- GOOGLE SEARCH - END -->
<!-- GETRESPONSE SUBSCRIPTION FORM - START -->
<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>
<!-- GETRESPONSE SUBSCRIPTION FORM - END -->
</div>
<div id="google-plus">
<!-- GOOGLE PLUS BADGE - START -->
<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>
<!-- GOOGLE PLUS BADGE - END -->
</div>
<br>
<div id="social-buttons">
<span id="feedburner">
<!-- FEEDBURNER.COM - START -->
<a href="http://feeds2.feedburner.com/examplecomFeaturedContent"><img src="http://www.romancestuck.com/images/rss-hearticon.jpg" height="18" width="57" border="0"></a>
<!-- FEEDBURNER.COM - END -->
</span>
<span id="pinterest">
<!-- PINTEREST.COM - START -->
<a data-pin-do="buttonFollow" href="http://pinterest.com/example/">example</a>
<!-- PINTEREST.COM - END -->
</span>
<span id="facebook-like">
<!-- FACEBOOK LIKE - START -->
<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>
<!-- FACEBOOK LIKE - END -->
</span>
<span id="twitter">
<!-- TWITTER FOLLOW - START -->
<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>
<!-- TWITTER FOLLOW - END -->
</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]