I asked this question sometime back, but it got lost, and now I’m back with example.
I would like that the red div’s center is aligned with green div’s center. But I don’t know the length of green div.
I know width of red DIV, but I don’t know length of green DIV (it’s dynamic).
Hi,
This may be a CSS question rather than JS but it does depend on what exactly needs to happen. Therefore we need a little more information on what you are trying to achieve before we can give a good answer one way or the other.
In your example you have absolutely placed the red div into position which removes it from the flow and therefore bears no relation to the green div as such. That will make it impossible for the green div to be centred in respect of an absolute child (although vice versa may be possible but will move the red div and not the green).
Does the red div need to be absolutely placed?
What determines the width of the red box exactly? You have set it to 300px. Is this width dynamic also?
If the elements don’t need to be absolutely placed and their width is dynamically applied you could set them to be display:table elements and then use margin:auto to automatically centre them both within their containing block.
At the moment the green div is just a background colour without content. Are you adding content to the green element? Or do you just want a green top to the red div which could be done by other means.
There are a number of other possible permutations I could see so the more you can tell s about what can be changed and what can’t it will aid with a solution.
You could of course use js to find the width of the red box and then move the green box to the centre but it may be that it’s a css question at heart.
To which dimension are you referring, when using the word “length” ?
coothead
Not really, it just needs to be out of flow of rest of content. Kinda like tooltip or abbr.
No, this one is static. I know it’s 300px and it will be set to that (it will change with media queries though).
I don’t understand this one. Green won’t have any content. It’s there to be hovered over. And it will show red content.
Width. I don’t know width of the green div. Because it will be set dynamically.
If you know that the red div is 300px with then wrap them both in a container of 300px width and do this.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#main {
position: relative;
margin: 0 auto;
width:300px;
}
.greenbox {
display:table;
margin:auto;
height: 15px;
background: green;
}
.tooltip {
background-color: red;
width: 300px;
position: absolute;
top: 50px;
left:0;
}
</style>
</head>
<body>
<div id="main">
<div class="greenbox">Auto Green box</div>
<div class="tooltip"> <b>One</b>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis laoreet metus a ultrices. Donec maximus et tortor ut tempus. Donec sed fringilla ligula. Vivamus ut nulla fringilla, consectetur mauris id, vehicula quam. Ut finibus eget ipsum ut malesuada. Ut volutpat metus sed est pharetra tempus. Aliquam ut euismod libero. Curabitur iaculis rutrum turpis ullamcorper lobortis. Donec ac mi sit amet eros sollicitudin rutrum at ornare velit. Aenean tristique mi non tellus fringilla, eu vulputate quam imperdiet. Nullam molestie purus quis tempor gravida. </p>
</div>
</div>
</body>
</html>
However, I think you may have additional requirements that prevent this type of simple scenario.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.