How do you position a DIV central in another DIV?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you position a DIV central in another DIV?

Post 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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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???
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

simonmlewis wrote:Does this have to be done with JS to spot the height of the div???
Sounds like it, yes.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

You heard of any particularly simple ways to achieve that with JS?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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>";
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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 ?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

No, that's what classes are for
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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.".
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post 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().
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post 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?!?!?!?!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

simonmlewis wrote:"Once the DOM is ready".....?1?!?!?!?!

Code: Select all

$(document).ready(function() { // <-- runs when the DOM is ready
    //... etc
});
Post Reply