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 »

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've just cracked it. I had a brainwave while out for a walk.

The reason i needs to be in the centre is because the image pushes it out.
the DIV in the "center" is using absolute positioning and some tricker to place it there. So, I have set the 'shown' image to be in the right div container, opacity to 0, and width to be 100%.

It now fits. And if one of the other rows of images differ, it's fine, as it's that image I am using with opacity of 0.

Odd way to do it, but uses no Javascript!
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 »

Oddly, using that method doesn't work terribly well on Safari.
It seems to put the centered box in the bottom right corner.

Code: Select all

<style>
.home-left
{
font-size: 1.2em;
position: relative;
}

.home-left h3
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}

.home-left h2
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}

.home-left-text
{
width: 48%;
float: left;
position: relative;
height: auto;
}

.home-left-text-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
margin: 0px;
padding: 0px;
}

.home-left-image
{
text-align: left;
float: right;
width: 50%;
margin-left: 10px;
position: relative;
}

.home-left-image img
{
width: 100%;
display: block;
}
</style>

<div class='home-left'><a href='/url'>
  <div class='home-left-text'><img src='/images/pages/home-yacht1.jpg' class='home-text-trans'/>
  <div class='home-left-text-inner'><h3>interior applications</h3>
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,
          </div>
        </div><div class='home-left-image'><img src='/images/pages/home-yacht1.jpg'  id='home-stoneselector-image'/></div>
  <div style='clear: both' ></div></a>
</div>
It works on all browsers, by placing the viewed image on the right, and the next in the centre of the left DIV.
The left div is stretched out by the image in the background, set to opacity: 0;.
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 »

Found the fix.
It works with the "transform:" element of the class that sets the central DIV.
although this website is not in English, the answers are in there in a CSS section.

It's similar to other CSS where you have to enter different code for different browsers.

http://www.michaelloy.de/jquery-sidr-io ... ement.html
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:Oddly, using that method doesn't work terribly well on Safari.
Yep. Safari is the new IE. Yay front end!
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 »

Yep.
It also dislikes Titillium Web font. A little bit "bitty" on screen. On a windows machine anyway.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply