Page 1 of 4
How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 3:22 am
by simonmlewis
I am doing a page where there is a big image on the left, then text on the right.
On the next row, image on the right, text on the left
The image fills out each row, so I am trying to set the text div to be 100% height, and then place the inner div for the text to be right in the centre.
I can get it to be centered, but the container won't go full height.
What am I doing wrong?
Code: Select all
<style>
.home-right h3
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: left;
color: #A37E2B;
font-size: 25px;
position: relative;
}
.home-right-text
{
width: 45%;
float: right;
position: relative;
min-height: 100%;
height: 100%;
border: 1px solid #ffff00;
}
.home-right-text-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}
.home-right-image
{
text-align: right;
float: left;
width: 50%;
margin-right: 20px;
}
.home-right-image img
{
max-width: 100%;
}
</style>
echo "<div class='home-right'>";
$result = mysql_query ("SELECT * FROM static WHERE section = 'home-yacht'");
while ($row = mysql_fetch_object($result))
{
echo "<div class='home-right-text'>
<div class='home-right-text-inner'>
$row->content
</div>
</div>
<div class='home-right-image'><img src='/images/pages/$row->photo' /></div>
";
}
echo "<div style='clear: both' ></div>
</div>";
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 7:48 am
by Celauran
Does .home-right have a height set? Percentage heights are relative to the absolute height of a parent. 100% of undefined isn't going to work.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 7:51 am
by simonmlewis
No, because .home-right-image has an image i there, which is 100% width, so stretches and contracts to the width of the screen.
Then I want the DIV on the right to be 100% the height of the DIV as it then is.
Does this have to be done with JS to spot the height of the div???
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 7:53 am
by Celauran
simonmlewis wrote:Does this have to be done with JS to spot the height of the div???
Sounds like it, yes.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 7:59 am
by simonmlewis
You heard of any particularly simple ways to achieve that with JS?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 8:02 am
by simonmlewis
I could try this, but not sure how to get the value it generates, into a variable, and assign that variable to home-right-text??
Code: Select all
echo "<script>
var element = document.getElementById('home-stoneselector$row->id');
alert(element.offsetHeight);
</script>";
if ($row->position == "left") { echo "<div class='home-left' id='home-stoneselector$row->id'>
<div class='home-left-text'>
<div class='home-left-text-inner'>";}
if ($row->position == "right") { echo "<div class='home-right' id='home-stoneselector$row->id'>
<div class='home-right-text'>
<div class='home-right-text-inner'>";}
if ($row->position == "wide") { echo "<div class='home-wide'>
<div class='home-wide-text'><div>";}
echo "$row->content
</div>
</div>";
if ($row->position == "left") { echo "<div class='home-left-image'>";}
if ($row->position == "right") { echo "<div class='home-right-image'>";}
if ($row->position == "wide") { echo "<div class='home-wide-image'>";}
echo "<img src='/images/pages/$row->photo' /></div>
<div style='clear: both' ></div>
</div>";
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 8:56 am
by Celauran
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 9:15 am
by simonmlewis
If I at least get the button working, that would be a good start.... but it isn't.
Code: Select all
if ($row->position == "left") { echo "<div class='home-left' id='home-stoneselector$row->id'>
<div class='home-left-text'>
<div class='home-left-text-inner'>";}
if ($row->position == "right") { echo "<div class='home-right' id='home-stoneselector$row->id'>
<div class='home-right-text'>
<div class='home-right-text-inner'>";}
if ($row->position == "wide") { echo "<div class='home-wide'>
<div class='home-wide-text'><div>";}
echo "$row->content
</div>
</div>";
if ($row->position == "left") { echo "<div class='home-left-image'>";}
if ($row->position == "right") { echo "<div class='home-right-image'>";}
if ($row->position == "wide") { echo "<div class='home-wide-image'>";}
echo "<img src='/images/pages/$row->photo' /></div>
<div style='clear: both' ></div>
<button id=\"home-stoneselector$row->id\">Get Document Height</button>
<script>
function showHeight( element, height ) {
$( \"div\" ).text( \"The height for the \" + element + \" is \" + height + \"px.\" );
}
$( \"#home-stoneselector$row->id\" ).click(function() {
showHeight( \"document\", $( document ).height() );
});
</script>
</div>";
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 9:19 am
by Celauran
Start by getting the JavaScript out of your PHP. Next you can have a listener for the class run once the DOM has loaded.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 9:31 am
by simonmlewis
Ok the reason it's in there, is because it's running on the ID. And the IDs will all have to have different names, so I did it dynamically.
So do I take it out, and make it work for each ID ?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 10:34 am
by Celauran
No, that's what classes are for
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 10:38 am
by simonmlewis
Mmmmm. So I need it to tell me how tall the image has pushed the height of the DIV to.... OR... ask it what the current height of the image is. Then set the height of the surround DIV to be the same.
Once that's achieved, I can set 100% height to the floating div and it will "snap-to-fit" whatever you stretch it to?
So if I put the JS outside, not dynamic, so all the IDs are the same name.
Then what do I do to "Next you can have a listener for the class run once the DOM has loaded.".
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 10:44 am
by Celauran
If they all have the same class, you can use that as your selector and, once the DOM is ready, iterate over them using
.each(). Inside the loop, you can get the current item's
.height() and set the relevant
CSS on its
.parents().
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 10:51 am
by simonmlewis
Sorry my friend, you are talking to talk greek to me. I don't understand the DOM and .height() stuff yet.
"Once the DOM is ready".....?1?!?!?!?!
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 10:56 am
by Celauran
simonmlewis wrote:"Once the DOM is ready".....?1?!?!?!?!
Code: Select all
$(document).ready(function() { // <-- runs when the DOM is ready
//... etc
});