Centering a Div does not show right on iPad

Report · Mar 19, 2017

Hello all,

At the moment I have a strange thing going on.

I have created a <div> that is 1104 px wide, and is centred in this way :

#pmetxt {

width: 1104px;

height: auto;

min-height: 100%;

margin-left: -552px;

left: 50%;

position: absolute;

z-index: 10;

top: 0px;

}

When I use a browser it centres right and all content is visible.

But when I use an iPad or iPhone it als centres nice, but on the left and right side, partly of the content is cut off.

I can scroll to the right, and then I can see the rest on the right side, but not on the left side.

The link to my test page is : http://pme-tecnica.nl/test_site

Is there a way to solve this?

Cheers

Koen

Report · Mar 19, 2017

The link does not work.

In the meantime, have a look at deleting the crossed out parts

#pmetxt {

width: 1104px;

height: auto;

min-height: 100%;

margin-left: -552px;

left: 50%;

position: absolute;

z-index: 10;

top: 0px;

}

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 19, 2017

New link is : http://pme-tecnica.nl/beta/

Cheers

Koen

Report · Mar 19, 2017

Hi Ben

If I remove those line, my content goes to -552 pixels, and in this case off my screen (or my div window)

Report · Mar 19, 2017

Ik wil je niet ontmoedigen, but the technique that you are using is about 10 years out of fashion.

Have a look at this tutorial to help you on the right track How to make a website in Dreamweaver part 1, site setup | Adobe Dreamweaver CC tutorials

Jammer van Wilders

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 19, 2017

Was ik al een beetje bang voor........

But the thing is, is that most site are look alike. And want to try something different with (maybe old stylish) a different look. (in a way)

So started with a Photoshop drawing and converted it to what I have setup now.

(And I want to avoid WordPress)

But is can this problem be solved?

Or do I have to get back to school and find a better way?

Cheers

Koen

Report · Mar 19, 2017

Copy and paste the following into a new document and view in browser. Also change the width of the browser to see the effect

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  html {
  background: url("http://pme-tecnica.nl/beta/img_algemeen/achtergrond/achtergr_01.jpg") no-repeat center center fixed;
  background-size: cover;
  }
  body {
  background-color: transparent;
  }
  header {
  padding: 15px;
  background-color: white;
  }
  nav {
  text-transform: uppercase;
  color: red;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  background-color: white;
  padding: 10px 0;
  }
  main {
  padding: 20px 0;
  }
  article[class^="col-"] div {
  background-color: white;
  padding: 15px;
  }
  </style>
</head>
<body class="container">
  <header class="row">
  <div class="col-sm-6">
  <dl>
  <dt>Audio:</dt>
  <dd>Ontwerp</dd>
  <dd>Versterking</dd>
  <dd>Uitvoering</dd>
  </dl>
  </div>
  <div class="col-sm-6">
  <h1 class="text-right">PME - <small>tecnica</small></h1>
  </div>
  </header>
  <div class="row spacer"> </div>
  <nav class="row">
  <div class="col-sm-3">Nieuws</div>
  <div class="col-sm-3">Over Ons</div>
  <div class="col-sm-3">Projecten</div>
  <div class="col-sm-3">Contact</div>
  </nav>
  <main class="row">
  <article class="col-sm-3">
  <div>
  <h4>Data projecten</h4>
  <p>Content</p>
  </div>
  </article>
  <article class="col-sm-3">
  <div>
  <h4>Data projecten</h4>
  <p>Content</p>
  </div>
  </article>
  <article class="col-sm-3">
  <div>
  <h4>Data projecten</h4>
  <p>Content</p>
  </div>
  </article>
  <article class="col-sm-3">
  <div>
  <h4>Data projecten</h4>
  <p>Content</p>
  </div>
  </article>
  </main>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Mar 19, 2017

Hi Ben,

Thanks a lot.

But discovered a little problem.

I have changed my example of the site a bit (see link I have sent before). there you can see that my columns vary in height and that they snap to eachother (using the old fashioned table function )

But I could not make this 'stick to each other' happen with the bootstrap function. Or am I overseeing something.

Also in bootstrap i most of the time see that the column width (in this case) 4 of them together are smaller than the title part at the top. But that is something that can change I guess.

cheers

Koen

Report · Mar 19, 2017

#1 Fixed width layouts are a bad idea. People need responsive or % width layouts now to support mobile & tablet devices.

#2 Negative margins are always risky. They usually create more problems than they solve. And the solutions lead to even more problems. It's a mess. Don't use negative margins.

#3 Absolute positioning in primary layouts is the wrong way to do this. Positioning is not required to center a layout and should be avoided.

I think you're tying to create a Masonry Grid. There are better ways to do this.

Please do a Google search for Masonry Grids with Bootstrap.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 19, 2017

Hi Nancy,

Thanks for your answer.

I'll have a look at the Masonry Grid system. (seems that I have to make a study of the bootstrap systems)

Is there another way to center a div? And also when it is a responsive or % width (with a max limit)

Cheers

Report · Mar 19, 2017

You need just 3 things to center divs with static CSS (no positioning).

A valid document type.
A stated width in pixels, %, ems or viewport units.
Margin-left and margin-right of auto (browser default).

<!doctype html>

<html>

<head>

<title>Centered</title>

<style>

body {background:#222;}

.container {

width: 80%;

margin: 0 auto;

background: #FFF;

padding: 2%;

}

</style>

</head>

<body>

<h1>This division is 80% & centered horizontally on screen.</h1>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 19, 2017

Yes true, but now the div is scrolling. But want it fixed to the top position.

And when I add a fixed position (to keep it on the top) the div goes to the left and stays there.

Report · Mar 19, 2017

Position fixed is best used with a 100% width container like this forum does with the top menu bar. Position fixed stays where it's positioned at all times.

Trying to center a fixed division in all viewports & devices is never going to work right. So don't bother.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 19, 2017

Not to be nit-picky, but setting a width of 100% is arguably not the most optimal method in this case. Instead, prefer left: 0; right: 0;

A width of 100% causes issues along the way if/when margins are applied, for example.

Report · Mar 19, 2017

Use padding instead of margins.

Review the CSS box model.

CSS Box Model

A position fixed division requires a stated width.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 20, 2017

https://forums.adobe.com/people/Nancy+OShea wrote

Use padding instead of margins.

Review the CSS box model.

CSS Box Model

A position fixed division requires a stated width.

Nancy

No, a position fixed element does not require a specific width set. When left and right with values of 0 are used, the width is inferred.

Padding will not allow for instances when white space is required around a fixed positioned element. While a width of 100% will work in most cases, it is not the most flexible solution.

For example:

header.page-header-->row-->h1

.page-header {
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    height: 5.5rem;
    background-color: #f2f2f2;
    margin: 0 5rem; /* or use percentage */
}
.row {
    margin: 0 auto;
    width: 60rem;
}

Report · Mar 20, 2017

A lot of answeras and solutions!

Thanks a lot you all.

I'll have to try things before I have the best solution for my site.

Let you know soon

Cheers

Report · Mar 22, 2017

A lot of thanks to evryone!

All of you gave some extra input and helped me a lot.

The site will be (for now) created int 'the old way' but when I have mastered bootstrap a bit more, I'll transfer it.

Thanks a lot!!

Cheers

Koen

Centering a Div does not show right on iPad

1 Correct answer