0

I'm trying to solve my problem since one week, and I really try everything ! I have a two column layout (left: content / right: description of the content). I want this two columns full height page and the only way I found is :

body {
        margin: 0;
        height: 100%;
        padding: 0;
}

#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    text-align: right;
}

The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.

Here's the bootply I made to be more explicit : http://www.bootply.com/1OovYNhx1E#

In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>

  • add 'display: flex; justify-content: center; align-items: center;' to leftcol – mlegg Aug 08 '16 at 00:48
  • @mlegg yes, that is the almost perfect answer, except : when there's a lot of text in my leftcol div, the text is "cut" at the top of the page. The same thing is happening when there is more than one picture. Edit : like in this screenshot, (we can't see the beginning of the text) [HERE](http://image.noelshack.com/fichiers/2016/32/1470618247-capture-d-ecran-2016-08-08-a-03-01-19.png) –  Aug 08 '16 at 01:01
  • The "disappearing at the top" problem only happens when resizing the window at minimum, or for example, on the phone (landscape mode). –  Aug 08 '16 at 01:14

2 Answers2

0

UPDATE

Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:

  • .fluid-container and .row are combined.
  • #inner is now moved out of #leftcol
  • #inner has the rulesets previously mentioned.
  • Both columns changed height: 100vh
  • Added position: relative to body.

  • Added width:100% and height:100% to html and body elements.

       #inner {
       position: absolute;
       left: 50%;
       top: 50%;
       bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
       transform: translate(-50%, -50%);
       z-index: 9999;
   }

PLUNKER

OLD

Use the following ruleset on your center element:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.

SNIPPET

body {
        position: relative;
        margin: 0;
        height: 100%;
        padding: 0;
}

#leftcol {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: left;
    background: brown;
}
#rightcol {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    height: 100%;
    width: 50%;
    text-align: right;
    background: yellow;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  outline: 3px solid red;
  width: 25%;
  height: 25%;
  background: rgba(0,0,0,.4);
}
  
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • add `position: relative` to body. – zer00ne Aug 08 '16 at 01:19
  • That's not changing anything... Images are cropped at the top... (tested on chrome, safari, firefox). –  Aug 08 '16 at 01:25
  • @Befa Test the update, I placed images on the right and text on the left. You should make an example showing the cropping problem. – zer00ne Aug 08 '16 at 02:06
  • 1.On [THIS EXAMPLE](http://image.noelshack.com/fichiers/2016/32/1470623487-holo.jpg) : in fullscreen, the img is cropped at the top. In mini window (or phone in landscape for example), it's perfect as expected (center vertically and horizontally). 2.On [THIS EXAMPLE](http://image.noelshack.com/fichiers/2016/32/1470623645-frg.jpg) : in fullscreen it's okay as expected. But in resize window (or phone in landscape), the top is cropped. (Cropped is okay if I could scroll to see the content but I can't !) –  Aug 08 '16 at 02:32
  • thanks for your time but I need my inner to be center in the left column, note in the body ! –  Aug 08 '16 at 02:38
  • here is the plunker for you to understand (try to resize): [HERE](https://embed.plnkr.co/dqXR1UroXUgcXtuei3ez/) –  Aug 08 '16 at 02:45
  • Updated answer add `bottom:-50%` to inner – zer00ne Aug 08 '16 at 07:43
  • `bottom:-25%` looks more evenly centered, but realize when the poem stretches beyond the height of 100% of the column, centering is not useful. – zer00ne Aug 08 '16 at 15:40
0

Finally find the answer HERE

With flexbox just add to your inner container : 

margin: auto;

It will prevent the top scroll problem !

Community
  • 1
  • 1