CSS to centralise a HTML5 div at the bottom of the screen

Question

I have the following HTML5 document:

<canvas id="myCanvas">
</canvas>
<img id="logo" src="/images/logo.png" style="visibility:collapse" />
<div id="adControl" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"
    data-win-control="MicrosoftNSJS.Advertising.AdControl"
    data-win-options="{applicationId: 'xyz', adUnitId: '123'}">
</div>

I'm trying to make the adcontrol appear in the centre at the bottom of the screen, beneath the canvas. Here's my CSS:

#adControl {   

    float:left; 

    margin: 0px auto;

}

#myCanvas {

    float:left;

}

I've tried various combinations of margin for the adcontrol, but don't seem to be able to centralise it.

Rankins

Try this: #adControl { clear:left; margin: 0px auto; } – Finke

To you want the #adControl to be fixed at the bottom of the screen or just below the #myCanvas? – Perennate

In this instance they are the same thing, but I'm aiming for below myCanvas – Rankins

Answer 1

Do yo mean something like this?

.box {
    width:1024px;
    margin: 0px auto;
}
#adControl {   
    position:fixed;
    bottom:0;
    width: 728px; 
    height: 90px;
    border: solid 1px red; 
    visibility:visible;
}

Outsider

Answer 2

In WinJS app for windows 8, you can use -ms-grid and -ms-flexbox to achieve this.

html:

<div class="mypage fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle">My Page</span>
        </h1>
    </header>    
    <section role="main">
        <canvas id="myCanvas">
        </canvas>
        <div class="ad-area-host">
            <div class="ad-area" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;"
               data-win-control="MicrosoftNSJS.Advertising.AdControl"
               data-win-options="{applicationId: 'xyz', adUnitId: '123'}">
            </div>
        </div>
    </section>
</div>

css:

// some of the css for fragment and section[role=main] already exists in default.css
.fragment 
{
    width: 100%;
    height: 100%;
    /* Define a grid with rows for a banner and a body */
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 128px 1fr;
    display: -ms-grid;
}

.mypage.fragment section[role=main] 
{
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
}

.ad-area-host
{
    -ms-grid-row: 2;
    height: 90px;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-align: center;
}

I have not tested this. give it a try. the idea is to use grid to align ad-area-host at bottom. then, use -ms-flexbox display in ad-area-host div to center the ad-area.

Farandole

I would recommend this approach with the grid or flexbox because centering is so much easier with these than messing with floats and margins. This approach will also scale better to different screen sizes. – Tasty

Answer 3

#adControl {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate( -50%, 0);
    -ms-transform: translate( -50%, 0); 
    -webkit-transform: translate( -50%, 0);
}

Do you mean something like this?

Perennate

Answer 4

Or do you mean something like this ?

#adControl {   
position: relative;
width: 728px;
margin: 0px auto;
top: 200px;
margin-top: 100px;
height: 90px;
border: solid 1px red;
visibility:visible
}

Daumier

Answer 5

You should actually remove float: left from the below div to make it in center.

Try this:

 #adControl { 
      clear:left; 
      margin: 0px auto; 
 }

Finke

This positions the div in the middle of the screen - rather than beneath the canvas. – Rankins

Answer 6

hi have a look at this,

http://jsfiddle.net/SnjWs/1/

let me know if it helps

#adControl {
    width:728px;
    margin: 0px auto;
    height:90px;
    border: solid 1px red;
    visibility:visible;
}
#myCanvas {
    width:200px;
    border:1px solid black;
}

<canvas id="myCanvas"></canvas>
<img id="logo" src="/images/logo.png" style="visibility:collapse" />
<div id="adControl" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: 'xyz', adUnitId: '123'}"></div>

Hyetography

Answer 7

I haven't tried with a canvas but it shouldn't matter much. I've used this to bottom and center an ad that is 728x90

.wideAdTile {
    position: fixed;
    bottom: 0;
    left: 50%;
    margin-left: -364px; /*negative half the width of the ad*/
    width: 728px;
    height: 90px;
    z-index: 1;
}

and the html

<div class="wideAdTile" id="wideAd"
    data-win-control="MicrosoftNSJS.Advertising.AdControl"
    data-win-options="{ applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043000' }">
</div>

Lx

ps the demo app for this is in this content here: windows8appfactor.com/downloads/06MonetizationBestPractices.zip – Lx