centering a float next to text with dynamic height

Page 1 of 1

5 Replies - 776 Views - Last Post: 22 June 2011 - 05:11 AM

#1 dc333  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 19-August 08

centering a float next to text with dynamic height

Posted 16 June 2011 - 04:20 AM

Hi,

I'm trying to vertically center a floating link with a background image next to text with dynamic height.
Here's what I have:

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			<a class="img"></a>
			<div class="text">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco 
				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
				dolor in reprehenderit in voluptate velit esse cillum dolore eu 
				fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
				proident, sunt in culpa qui officia deserunt mollit anim id est 
				laborum.			
			</div>
		</div>
	</body>
</html>


CSS file is:

.container{
	margin:auto;
	width:300px;
}

.text{
	margin-right:50px;
}

.img{
	display:block;
	background-image:url(img.png);
	background-repeat:no-repeat;
	background-position:center;
	height: 47px;
	width: 47px;
	float:right;
}


All I need is a way to get the link vertically centered without knowing the height of the container (the text is dynamic).

Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: centering a float next to text with dynamic height

#2 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 701
  • View blog
  • Posts: 8,577
  • Joined: 14-September 07

Re: centering a float next to text with dynamic height

Posted 16 June 2011 - 11:25 AM

You could do something like 
a:link { text-align: center; }


But if you are trying to float a link next to a background image, naturally the link is going to overlap. If it absolutely must be a background image you would want to declare the position of the link text absolutely to control exactly where in the relative div the text should be.
Was This Post Helpful? 0
  • +
  • -

#3 dc333  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 19-August 08

Re: centering a float next to text with dynamic height

Posted 19 June 2011 - 01:20 AM

Thanks Nykc for answwering, but I'm not trying to "float a link next to a background image", the link is the element with the background image (see code). And in any case, text-align won't help since I need to vertically center the element.
I need users to press on the image and it will lead to another page. To the left of the link (which has a background image), is text with dynamic height and I need the link to be vertically centered according to the height of that text.

What I need:

dynamic
height
text
dynamic***[img]***
height
text
dynamic


What I have:

dynamic***[img]***
height
text
dynamic
height
text
dynamic



Thank you.
Was This Post Helpful? 0
  • +
  • -

#4 BiffBaffBoff  Icon User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: centering a float next to text with dynamic height

Posted 20 June 2011 - 09:55 AM

Hi there,

If you could post a link to this it'd be helpful to help solve your issue.
Was This Post Helpful? 0
  • +
  • -

#5 dc333  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 19-August 08

Re: centering a float next to text with dynamic height

Posted 22 June 2011 - 04:21 AM

Hi,

I can't upload it online but you can take a look at the attached files, just open the index.html file in your browser.
I want the image to be at the center of the text (vertically), without knowing the height of the text.

Thanks :)

Attached File(s)

  • Attached File  test.zip (2.42K)
    Number of downloads: 29

Was This Post Helpful? 0
  • +
  • -

#6 BiffBaffBoff  Icon User is offline

  • D.I.C Head

Reputation: 20
  • View blog
  • Posts: 77
  • Joined: 10-February 11

Re: centering a float next to text with dynamic height

Posted 22 June 2011 - 05:11 AM

As it has dynamic height, I guess the only way to solve this would be to use Javascript.

Here is a solution I found that will work with browsers that have javascript enabled:

HTML / JS :

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			
			<div class="text">
            <a class="img"></a>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
				eiusmod tempor incididunt ut labore et dolore magna aliqua. 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco 
				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
				dolor in reprehenderit in voluptate velit esse cillum dolore eu 
				fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
				proident, sunt in culpa qui officia deserunt mollit anim id est 
				laborum.			
			</div>
		</div>
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    

$(function() { 

	var textHeight = $(".text").height();
	
	var imgHeight = $(".img").height();
	
	var newImgHeight = textHeight / 2 - imgHeight / 2;
	
	$(".img").css({ "top"	: newImgHeight });

});
    
    
    </script>
        
        
	</body>
</html>


CSS :

.container{
	margin:auto;
	width:300px;
}

.text{
	margin-right:65px;
	position: relative;
}

.img{
	display:block;
	background-image:url(img.png);
	background-repeat:no-repeat;
	background-position:center;
	height: 47px;
	width: 47px;
	position: absolute;
	left: 100%;
	margin-left: 65px;
}


I put the img inside the text div to make its absolute position relative to the text div. I then applied the margin-left of 65px to get the same effect you had with the margin-right.

This post has been edited by BiffBaffBoff: 22 June 2011 - 05:13 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1