Welcome to WebmasterWorld Guest from 107.20.75.63

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)

Junior Member

10+ Year Member

joined:Mar 16, 2005
posts: 51
votes: 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]

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

Junior Member

10+ Year Member

joined:Mar 16, 2005
posts: 51
votes: 0


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

Senior Member from US 

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

joined:Apr 9, 2011
posts:12714
votes: 244


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 June 1, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 16, 2005
posts: 51
votes: 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">
<!-- 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]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members