locked
My central div does not go up it is fixed on bottom, why? RRS feed

  • Question

  • User1991482975 posted

    Hi, i have 3 div and the central div show his content fixed on the bottom, when i i would love to have it full height, showing the white box for the same size of the pictures ont the side...

    This is the code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
        <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
        <style>
            body {
                background-color: #f5f5f5;
                font-family: 'Roboto Condensed',sans-serif;
            }
    
            p {
                font-size: 22px;
            }
    
            a {
                text-decoration: none;
            }
    
            hr.style14 {
                border: 0;
                height: 1px;
                background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                width: 85%;
            }
    
            .div__box {
                display: inline-block;
                margin: 2%;
                background-color: #f5f5f5 ;
            }
    
            .center__title {
                font-weight: 700;
                text-transform: uppercase;
                color: #3e3e41;
            }
    
            .div__box__img {
                max-width: 230px;
                min-width: 230px;
            }
    
            .div__box__center {
                max-width: 350px;
                min-width: 350px;
            }
    
            .div__box__inside {
                padding: 2%;
            }
    
            .div__box__inside__center {
                background-color: #ffffff;
                background: white;
            }
    
            .ch-btn-go {
                font-family: 'Fjalla One', sans-serif;
                font-size: 0.95em;
                background: #ff0048;
                background-image: none;
                border: 1px solid #ff0048;
                border-radius: 0px;
                color: #ffffff;
                letter-spacing: 3px;
                font-weight: 100;
                text-decoration: none !important;
                text-shadow: none;
                text-transform: uppercase;
                padding: 3%;
                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
            }
    
                .ch-btn-go:hover {
                    background: #ffffff;
                    color: #ff0048;
                    border: 1px solid #ff0048;
                    -webkit-transition: all 1s ease-in-out;
                    -moz-transition: all 1s ease-in-out;
                    -ms-transition: all 1s ease-in-out;
                    -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
                }
    
    
            .div__box__img_more {
                margin: 0;
                padding: 0;
                /*   border: 0.5px solid #303030;*/
                width: 100%;
                height: 100%;
                background-repeat: no-repeat;
                background-size: cover;
                min-height: 175px;
                min-width: 230px;
                text-align: center;
                ;
                justify-content: center;
                display: block;
                float: left;
                box-sizing: border-box;
                vertical-align: middle;
            }
    
                .div__box__img_more:hover {
                    filter: brightness(120%);
                    -webkit-filter: brightness(120%);
                    -moz-filter: brightness(120%);
                    -o-filter: brightness(120%);
                    -ms-filter: brightness(120%);
                }
    
    
            .div__box__img_more_autor {
                bottom: 0px;
                ;
                text-align: center;
                left: 50%;
                transform: translateX(-50%);
                width: 80%;
                background: rgba(0,0,0,.6);
                backdrop-filter: grayscale(1) contrast(3) blur(1px);
            }
    
            .div__box__img_more_autor-h2 {
                font-size: 1.3rem;
                color: #fff;
                text-align: center;
                padding: 1%;
                letter-spacing: 3px;
                text-shadow: 0 0 7px rgba(0,0,0, 0.5);
            }
        </style>
    </head>
    <body>
    
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4" align="center">
                <p>
                    <strong>1er</strong> site de coiffure en ligne
                </p>
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo" title="CollectionHair Logo" />
                </a>
            </div>
        </div>
    
        <hr class="style14">
    
        <div class="row">
    
            <div class="col-lg-12 col-md-12 col-sm-12" align="center">
    
                <div align="center" class="div__box div__box__img">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); margin: 2%;">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Visibilité</h3>
                            </div>
                        </div>
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); margin: 2%;">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Clients</h3>
                            </div>
                        </div>
                    </a>
                </div>
    
                <div align="center" class="div__box div__box__center">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__inside__center">
                            <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1>
                            <p><i class="ch-btn-go">Créer mon compte</i></p>
                        </div>
                    </a>
                </div>
    
                <div align="center" class="div__box div__box__img">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); margin: 2%;">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Reservation</h3>
                            </div>
                        </div>
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Portfolio</h3>
                            </div>
                        </div>
                    </a>
                </div>
    
            </div>
    
        </div>
    
    
        <hr class="style14">
    
    
    </body>
    </html>

    What is wrong?

    Wednesday, January 18, 2017 10:34 AM

All replies

  • User-1393433442 posted

    Hi,

    You try this code for set your central div, as same size of the other div,

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
        <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
        <style>
            body {
                background-color: #f5f5f5;
                font-family: 'Roboto Condensed',sans-serif;
            }
    
            p {
                font-size: 22px;
            }
    
            a {
                text-decoration: none;
            }
    
            hr.style14 {
                border: 0;
                height: 1px;
                background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
                width: 85%;
            }
    
            .div__box {
                display: inline-block;
                background-color: #f5f5f5 ;
            }
    
            .center__title {
                font-weight: 500;
                text-transform: uppercase;
                color: #3e3e41;
    			width:200px;
    			
            }
    
            .div__box__img {
                max-width: 230px;
                min-width: 230px;
            }
    
            .div__box__center {
                max-width: 850px;
                min-width: 850px;
            }
    
            .div__box__inside {
                padding: 43% 2% 10% 2%;
    			
            }
    
            .div__box__inside__center {
                background-color: #ffffff;
                background: white;
    			height:25%;
    			width:70%;
    			margin-top:0%;
    		
            }
    
            .ch-btn-go {
                font-family: 'Fjalla One', sans-serif;
                font-size: 0.95em;
                background: #ff0048;
                background-image: none;
                border: 1px solid #ff0048;
                border-radius: 0px;
                color: #ffffff;
                letter-spacing: 3px;
                font-weight: 100;
                text-decoration: none !important;
                text-shadow: none;
                text-transform: uppercase;
                padding: 2%;
                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
            }
    
                .ch-btn-go:hover {
                    background: #ffffff;
                    color: #ff0048;
                    border: 1px solid #ff0048;
                    -webkit-transition: all 1s ease-in-out;
                    -moz-transition: all 1s ease-in-out;
                    -ms-transition: all 1s ease-in-out;
                    -o-transition: all 1s ease-in-out;
                    transition: all 1s ease-in-out;
                }
    
    
            .div__box__img_more {
                margin: 0;
                padding: 15%;
                /*   border: 0.5px solid #303030;*/
                width: 25%;
                height: 40%;
                background-repeat: no-repeat;
                background-size: cover;
                min-height: 175px;
                min-width: 230px;
                text-align: center;
                ;
                justify-content: center;
                display: block;
                float: left;
                box-sizing: border-box;
                vertical-align: middle;
            }
    
                .div__box__img_more:hover {
                    filter: brightness(120%);
                    -webkit-filter: brightness(120%);
                    -moz-filter: brightness(120%);
                    -o-filter: brightness(120%);
                    -ms-filter: brightness(120%);
                }
    
    
            .div__box__img_more_autor {
                bottom: 0px;
                ;
                text-align: center;
                left: 50%;
                transform: translateX(-50%);
                width: 80%;
                background: rgba(0,0,0,.6);
                backdrop-filter: grayscale(1) contrast(3) blur(1px);
            }
    
            .div__box__img_more_autor-h2 {
                font-size: 1.3rem;
                color: #fff;
                text-align: center;
                padding: 5%;
                letter-spacing: 3px;
                text-shadow: 0 0 7px rgba(0,0,0, 0.5);
            }
        </style>
    </head>
    <body>
    
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4" align="center">
                <p>
                    <strong>1er</strong> site de coiffure en ligne
                </p>
                <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                    <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo" title="CollectionHair Logo" />
                </a>
            </div>
        </div>
    
        <hr class="style14">
    
        <div class="row">
    
            <div class="col-lg-12 col-md-12 col-sm-12" align="center">
    
                <div align="center" class="div__box div__box__img">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); ">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Visibilité</h3>
                            </div>
                        </div>
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); ">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Clients</h3>
                            </div>
                        </div>
                    </a>
                </div>
    
                <div align="center" class="div__box div__box__center">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__inside__center">
                            <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1>
                            <p><i class="ch-btn-go">Créer mon compte</i></p>
                        </div>
                    </a>
                </div>
    
                <div align="center" class="div__box div__box__img">
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon" title="Comment Prendre Possession De Mon Salon" target="_blank">
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); ">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Reservation</h3>
                            </div>
                        </div>
                        <div class="col-md-12 div__box__inside div__box__img_more" style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;">
                            <div class="div__box__img_more_autor" align="center">
                                <h3 class="div__box__img_more_autor-h2">Portfolio</h3>
                            </div>
                        </div>
                    </a>
                </div>
    
            </div>
    
        </div>
    
    
        <hr class="style14">
    
    
    </body>
    </html>
    

    Thanks,

    Wednesday, January 18, 2017 12:19 PM
  • User1991482975 posted

    Hi, this code does not show the good result.

    Actually, the picture are even stech..

    Wednesday, January 18, 2017 1:10 PM
  • User-832373396 posted

    Hi grafic,

     

    My central div does not go up it is fixed on bottom

    I suggest that we could refer to my code, it works ;

    Here is my code ,and i just added a little bit of code:

    Note: The code  of my operation  has been marked with a slash

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
        <title>On parle de votre salon de coiffure sur collectionhair.fr</title>
        @*<link href="~/Content/bootstrap.css" rel="stylesheet" />*@
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
    …still your code
    </style>
    </head>
    <body>
        <div class="container">
    
    
            <div class="row">
                   <div class="col-lg-4 col-md-4 col-sm-4 col-lg-offset-4 col-md-offset-4 col-sm-offset-4"  align="center"  >
                    <p>
                        <strong>1er</strong> site de coiffure en ligne
                    </p>
                    <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
    title="Comment Prendre Possession De Mon Salon" target="_blank"> <img src="http://www.collectionhair.com/Content/Images/Collection-Hair-Logo-100.png" alt="CollectionHair Logo"
    title="CollectionHair Logo" /> </a> </div> </div> <hr class="style14"> <div class="row"> @*<div class="col-lg-12 col-md-12 col-sm-12" align="center">*@ <div class="col-lg-12 col-md-12 col-sm-12 "> <div class="col-lg-4 col-md-4 col-sm-4" align="center"> <div align="center" class="div__box div__box__img"> <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
    title="Comment Prendre Possession De Mon Salon" target="_blank"> <div class="col-md-12 div__box__inside div__box__img_more"
    style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-SEO.jpg'); margin: 2%;"> <div class="div__box__img_more_autor" align="center"> <h3 class="div__box__img_more_autor-h2">Visibilité</h3> </div> </div> <div class="col-md-12 div__box__inside div__box__img_more"
    style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Booking.jpg'); margin: 2%;"> <div class="div__box__img_more_autor" align="center"> <h3 class="div__box__img_more_autor-h2">Clients</h3> </div> </div> </a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4" align="center"> <div align="center" class="div__box div__box__center"> <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
    title="Comment Prendre Possession De Mon Salon" target="_blank"> <div class="col-md-12 div__box__inside div__box__inside__center"> <h1 class="center__title">On parle de votre salon de coiffure sur collectionhair.fr</h1> <p><i class="ch-btn-go">Créer mon compte</i></p> </div> </a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4" align="center"> <div align="center" class="div__box div__box__img"> <a href="http://www.collectionhair.fr/Page/Quote/1011/comment-prendre-possession-de-mon-salon"
    title="Comment Prendre Possession De Mon Salon" target="_blank"> <div class="col-md-12 div__box__inside div__box__img_more"
    style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Costumer.jpg'); margin: 2%;"> <div class="div__box__img_more_autor" align="center"> <h3 class="div__box__img_more_autor-h2">Reservation</h3> </div> </div> <div class="col-md-12 div__box__inside div__box__img_more"
    style="background-image: url('http://www.collectionhair.com/Content/Images/Newsletter/Newsletter-Salon-Get-Portfolio.jpg'); margin: 2%;"> <div class="div__box__img_more_autor" align="center"> <h3 class="div__box__img_more_autor-h2">Portfolio</h3> </div> </div> </a> </div> </div> </div> </div> <hr class="style14"> </div> </body> </html>

    Here is my screenshot:

    Best regards,

    Jolie

    Friday, January 20, 2017 5:59 AM