Adding element without conflicting the layout

HTML & CSS
1

Hey guys,

I need to add a language options paragraph at the top of the site… but it shifts the logo to the left - that way it’s no longer centered.
Is there a way, other than using absolute positioning to fix this problem? Basically so that the logo ‘ignores’ the EN|SK element and stays centered relative to the page.
I tried using almost every display property value, but that doesn’t do anything.

Here’s a screenshot:

Thank you

2

There certainly will be a way, but we need to see your HTML/ CSS to advise properly. If you can’t post a link, check out this thread for tips on code posting. :slight_smile:

3

Is there are reason why you would prefer not to use absolute positioning of the EN|SK elements?

As @ralph_m said, we really need to see your code to offer our best advice.

4

I don’t want to use absolute positioning since it’s a responsive site. Here’s the code for the header:

<body>	
	<div id='container'>
	<p style='margin: 0; float: right;'><a style='color: #63c812' href='index-en.html' title='English'>EN</a>|<a style='color: #63c812' href='index.html' title='Sloven&#269;ina'>SK</a></p>
		<header>	
			<h1>B</h1>
		</header>

#container{
	width: 90%;
	margin: auto;
	text-align: center;
}	

header h1{
	text-indent: 1000%;
	white-space: nowrap;
	overflow: hidden;
	width: 424px;
	height: 259px;
	margin: 40px auto;
	background: url('../images/logo.png') no-repeat;
	transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
}
5

For a small item like this, absolute positioning is fine in a responsive site. It will always be in the top right corner of the container, however wide or narrow.

The key is to give the container position: relative, and then the absolutely positioned element will be positioned in relation to that container.

You didn’t supply a functional example, as suggested in my link above. I hope you’ll read that link. :slight_smile:

6

Thanks for help ralph. Now it works nicely :slight_smile:
I apologize for my insufficient post…

7

No problem. Glad that helped. :slight_smile: