Title: Header Positioning   Consistency issues
Last modified: August 21, 2016

---

# Header Positioning Consistency issues

 *  [Tee_Yum](https://wordpress.org/support/users/tee_yum/)
 * (@tee_yum)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/header-positioning-consistency-issues/)
 * website: friday.statecollegefarmers.com
 * So I am trying to position the elements in the header to A) be relative to one
   another and B) stay ‘centered’ regardless of resolution or browser(as close as
   possible, anyway)
 * CSS for the elements is as follows:
 *     ```
       #hdrlogo {
       	position:relative;
       	left:380px;
       	top: 20px;
   
       }
       #timehdrtop:first-letter {
       	text-transform: uppercase;
       }
       #timehdrtop {
       	color: #424242;
               font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
       	letter-spacing:0.1em;
       	text-align:center;
       	margin: 1px auto;
       	text-transform: lowercase;
       	line-height: 10%;
       	font-size: 28pt;
       	font-variant: small-caps;
       	float:right;
               margin-right: 30px;
       	margin-top: -100px;
   
       }
       #timehdr:first-letter {
       	text-transform: uppercase;
       }
       #timehdr {
       	color: #424242;
               font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
       	letter-spacing:0.1em;
       	text-align:center;
       	margin: 40px auto;
       	text-transform: lowercase;
       	line-height: 10%;
       	font-size: 26pt;
       	font-variant: small-caps;
       	float:right;
               margin-right: 50px;
       	margin-top: -60px;
       }
   
       #timesmlhdr:first-letter {
       	text-transform: uppercase;
       }
       #timesmlhdr {
       	color: #424242;
               font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
       	letter-spacing:0.1em;
       	text-align:center;
       	margin: 40px auto;
       	text-transform: lowercase;
       	line-height: 10%;
       	font-size: 16pt;
       	font-variant: small-caps;
       	float:right;
               margin-right: -310px;
       	margin-top: -20px;
       }
       #lrghdr:first-letter {
               text-transform: uppercase;
       }
       #lrghdr {
               color: #424242;
               font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
       	letter-spacing:0.1em;
       	text-align:center;
       	margin: 40px auto;
       	text-transform: lowercase;
       	line-height: 10%;
       	font-size: 37pt;
       	font-variant: small-caps;
       	float:left;
       	margin-top: -100px;
       	margin-left:10px;
       }
       #smlhdr:first-letter {
               text-transform: uppercase;
       }
       #smlhdr {
               color: #424242;
               font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
       	letter-spacing:0.1em;
       	text-align:center;
       	margin: 40px auto;
       	text-transform: lowercase;
       	line-height: 100%;
       	font-size: 14pt;
       	font-variant: small-caps;
       	float:left;
       	margin-top:-85px;
       	margin-left:60px;
       }
       ```
   
 * As it exists now, I am unable to figure out how to get the text on either side
   to stay floating on the right and left, and get the logo to stay centered regardless
   of resolution.
 * EDIT: Using relative positioning creates a ton of white space in the header –
   so I moved away from that.

Viewing 1 replies (of 1 total)

 *  Thread Starter [Tee_Yum](https://wordpress.org/support/users/tee_yum/)
 * (@tee_yum)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/header-positioning-consistency-issues/#post-3657632)
 * The closest solution I have found so far is to make all of the positioning relative–
   which adds a metric ton of white space to the header.
 * Logically this makes sense, as the objects are positioned relative to where they
   would have been, so that space is left open.
 * Halps D:

Viewing 1 replies (of 1 total)

The topic ‘Header Positioning Consistency issues’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [php](https://wordpress.org/support/topic-tag/php/)
 * [positioning](https://wordpress.org/support/topic-tag/positioning/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 1 participant
 * Last reply from: [Tee_Yum](https://wordpress.org/support/users/tee_yum/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/header-positioning-consistency-issues/#post-3657632)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics