CODEWITHSUNDEEP
cssabsolute
Kris Hunt
Kris Hunt

Reputation: 2242

Absolutely position div inside container while retaining the container's position in document flow

I know there's got to be a simple solution to this, but I'm drawing a blank right now.

Here's what I have:

Before

I want the yellow text block to be absolutely positioned inside its parent container, 10 pixels from the right edge. But when I add "position:absolute" and "right:10px" to .text-block, this is what happens:

After

I know I can just add a fixed height to the parent container for a quick fix, but this will be on a responsive site, so the parent containers need to have a fluid height and width. Here's my code. What am I doing wrong?

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			body {
				background-color: #FFF;
				font-family: helvetica;
				color: #333;
			}
			
			#wrapper {
				padding: 20px;
			}
			
			.block {
				position: relative;
				border: 1px solid #333;
				margin-bottom: 10px;
				padding: 10px;
			}
			
			.text-block {
				width: 40%;
				background-color: yellow;
				position: absolute;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
			
			<div class="block">
				<div class="text-block">
					<h2>Heading</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
				</div> <!-- text-block -->
			</div> <!-- block -->
			
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
		</div> <!-- wrapper -->
	</body>
</html>

Upvotes: 2

Views: 67

Answers (2)

Dylan Watt
Dylan Watt

Reputation: 3387

Absolute positioning does take it out of the flow, so what it's doing is expected. Here's one solution using relative positioning instead, plus a transform to achieve what you want with no markup changes. There are many ways with different text-align, float, flex solutions to handle this.

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			body {
				background-color: #FFF;
				font-family: helvetica;
				color: #333;
			}
			
			#wrapper {
				padding: 20px;
			}
			
			.block {
				position: relative;
				border: 1px solid #333;
				margin-bottom: 10px;
				padding: 10px;
			}
			
			.text-block {
				width: 40%;
				background-color: yellow;
				position: relative;
				left: 100%;
                transform:translate(-100%, 0%);
                -webkit-transform:translate(-100%, 0%);
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
			
			<div class="block">
				<div class="text-block">
					<h2>Heading</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
				</div> <!-- text-block -->
			</div> <!-- block -->
			
			<div class="block">
				<h2>Heading</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis.</p>
			</div> <!-- block -->
		</div> <!-- wrapper -->
	</body>
</html>

Upvotes: 1

Bryan Zwicker
Bryan Zwicker

Reputation: 652

Absolutely positioned elements do not affect the parent container height.

You need to use Javascript to change the height as a workaround to this behavior (or, alternatively, use relative positioning).

$(document).ready(function() {
    var objHeight = 0;
    $.each($('.block').children(), function(){
        objHeight += $(this).height();
    });
    $('.block').height(objHeight);
});​

This answer is from here: https://stackoverflow.com/a/8185521/722617

Upvotes: 0

Related Questions