Fix Widget Position
CSS Fix for Text Widget Without Title
I previously wrote about using a Text Widget without a Widget Title or Name as a way to gain a small improvement in SEO for a WordPress.com blog (see WordPress Widget Headings) by using a lower order <h> attribute than the <h3> standard mark-up used by the theme.
Some themes play nicely when the title is blank by collapsing the space used by the title if it is missing. More themes however keep the space intended for the title resulting in a large blank space that spoils the appearance of the blog. This can be fixed fairly easily using CSS styles to reposition the widget content.
Remove Extra Blank Space Above Widget
When the Widget position is too far below the previous widget (vertical position) setting a negative position: relative; top; value moves the position up.
Wrap the entire widget contents in <div> tags
<div style=”position: relative; top: -30px;”> ALL THE CONTENT IN THE WIDGET </div>
Left Margin Fix
Sometimes the content of a text widget is positioned too far to the right – the content doesn’t align with other widget content.
<div style=”position: relative; left: -9px;”> ALL THE CONTENT IN THE WIDGET </div>
Combining for the Full Widget Position Fix
Combine the CSS style to fix both the top blank space and the left indent into one style
<div style=”position: relative; left: -9px top: -30px;”>ALL THE CONTENT IN THE WIDGET</div>
Either <div> or <p> can be used
CSS style can be used with div or p tags, as well as <h> markup to achieve similar effects. The rule of thumb to use when deciding which set of markup to use is as follows
Use <div style=” “> to wrap a block of content that includes headings <h> paragraphs <p> and other content such as images.
Use <p style=” “> for individual paragraphs
Use <h# style=” “> to style individual headings used in the widget content
Notes About CSS Position Relative
To fix the widget position we need to use the relative type of CSS position rule instead of absolute or fixed. position: relative means the position of the markup is used as a starting point for <div> position. If position: absolute was used, the starting point would be the top of the page – top was used or the left edge of page if left was used.