How do you position a DIV central in another DIV?

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

Moderator: General Moderators

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 »

Like in CSS, . references classes, # references IDs. Also, IDs are meant to be unique. Otherwise, it looks like you've got the concept.
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 »

So are we dealing with IDs here or Class names?
Either way, each Class is going to have roughly the same Class name - well, every other one as it's image left, image right and so on.

This is why I thought I had to put the JS in PHP, so I can dynamically name the IDs in the function.
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 »

So why not use a common class?

Code: Select all

<div class="image image-right">...</div>
<div class="image image-left">...</div>
and so forth, and then target $('.image');
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 »

Again, this whole issue goes away by simply assigning a height to the wrapping element. You sure there's no way to do that?
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 wish there was.
I've been asked to make the image and text divs to expand and contract to be responsive. And I want the text in the right div, to be central in the white box.

Plan B would be to fix the size of the image and set the height of the DIV. But it would be SOOOOO cool if the image changed to the % of the screen, and the DIV in the right box stayed there in the middle, and adjusted to suit.

I cannot any any other way to do this. I seriously thought setting a div to be 100% height, would just fill the DIV that it's in, even if it's not given a height. Because it's there, locked in place by the height of the image at the time.

It's a bit like the width of a div.

If I set a DIV with no width.
Put in an image that is 150px wide, and then put a div below that, the width of the div would just snap to fit... because that is where the width of the DIV stops naturally.

Why can it not be the same with height. It's stops there. I can see the border of it stopping, so why can I not say "height 100%" and it just fills that div.

I will try your image class.
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 »

What about using a couple of different heights based on breakpoint? That would still get around all of this -- and we haven't gotten to resizing the page yet -- and still (mostly?) achieve the desired effect.
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 »

Any chance u can jfiddle to show me how?
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 »

Sure. Can you provide some sample markup (remove anything sensitive, natch)?
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 »

Code: Select all


<div class='home-right' id='home-stoneselector'>
  <div class='home-right-text'>
  <div class='home-right-text-inner'><h3>luxury yacht applications</h3>
<p>Welcome text here to be dynamic and have lots of content on this page and look so nice and special your code and my text and design how can this...</p>
          </div>
        </div><div class='home-right-image'><img src='/images/pages/120home-yachttest.jpg'  id='home-stoneselector-image'/></div>
  <div style='clear: both' ></div>
</div>
And you have the CSS from earlier I think.

"home-right-text-inner" It's this DIV that needs to be in the MIDDLE of home-right-text.
Attachments
image to use
image to use
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 »

Not exactly sure what I am looking at.
I can see a div on the right, that's about 2cm tall and text that leaks out of it.
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 »

Interesting. What I see is markedly different.
Attachments
Screen Shot 2016-02-03 at 3.28.55 PM.png
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 »

This is what I see.
Attachments
ss.jpg
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'm trying everything i can think of and find now.

Code: Select all

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<?php
$result = mysql_query ("SELECT * FROM static WHERE section = 'home-stoneselector' ORDER BY priority");
while ($row = mysql_fetch_object($result))
  {
  if ($row->position == "left") { echo "<div class='homeheight home-left' id='home-stoneselector'>
  <div class='home-left-text'>
  <div class='home-left-text-inner'>";}
  
  if ($row->position == "right") { echo "<div class='homeheight home-right' id='home-stoneselector'>
  <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'  id='home-stoneselector-image'/></div>
  <button id=\"homeheight\">Get Document Height</button>
  <div style='clear: both' ></div>
</div>";
  }
?>
<script src="/js/home-resize.js"></script>
JS File:

Code: Select all

$(document).ready(function() {
    $('.homeheight').each(function() {
        var height = $(this).height();
        $('.home-right-text').css('height', height + 'px');
    });
    
    $( ".homeheight" ).click(function() {
  showHeight( "div", $( div ).height() );
});
});
The button doesn't make anything appear, to prove that the height is working.
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 »

Where is the showHeight function defined? What about the div variable? Why are you attaching a click handler to divs?
Post Reply