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 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

widget position css fix screenshot

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.

me on google plus+Mike Otgaar


About Mike

Web Developer and Techno-geek Saltwater fishing nut Blogger

Posted on September 2, 2012, in CSS, HTML and tagged , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: