Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS I cannot center horizontally and display: table is not 100%

Kaworu

Active Coder
Hi! :)

I am working on an element of a bigger page. I believe what's below is the complete minimal code of a solution, but it is not working.

Basically, I have created a table in CSS (display: table) and I want for this whole table to be 100% of the width. I also wanna for elements withing this CSS table to be centered both horizontally and vertically.

Currently, I have this:

HTML-CSS-page-problem.png

As you see, the table is around 50% of width, not 100%. Also, the elements are centered left-right, but not up-down.

Below, in the spoiler section, you can find the complete source code.

HTML:
<!DOCTYPE html>

<html>

    <head>
        <link rel="stylesheet" href="../CSS/style.css">
        <link rel="stylesheet" href="style-exp.css">
        <link rel="shortcut icon" href="../IMG/favicon-v2.png">
    </head>

    <body>

        
        <div class"=table-businesscard">

            <div class="table-businesscard-header">
                <div class="center-both">
                    <div class="center2">
                        <h1>Header</h1>
                        <p>A paragraph</p>
                    </div>
                </div>
            </div>

            <div class="table-businesscard-next">
                <div class="businesscard-container">
                    <div class="center-both">
                        <img class="mySlides" src="IMG-personal/businesscard-front.png">
                        <img class="mySlides" src="IMG-personal/businesscard-back.png">
                                
                        <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
                        <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>
                    </div>
                </div>
            </div>
        </div>

        <script>

            var slideIndex = 1;
            showDivs(slideIndex);

            function plusDivs(n) {
              showDivs(slideIndex += n);
            }

            function showDivs(n) {
              var i;
              var x = document.getElementsByClassName("mySlides");
              if (n > x.length) {slideIndex = 1}
              if (n < 1) {slideIndex = x.length} ;
              for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
              }
              x[slideIndex-1].style.display = "block";
            }

        </script>
    </body>
</html>

CSS:
.mySlides
{
    width: 100%;
     height: 100%;
      object-fit: contain;
}

.businesscard-container
{
    position: relative;
    width: 300px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    /*
    margin-top: auto;   
    margin-bottom: auto;
    */
}

.w3-button
{
    position: absolute;
    top: 50%;
}

.w3-display-left
{
    position: absolute;
    right: 100%;
}

.w3-display-right
{
    position: absolute;
    left: 100%;
}

.table-businesscard
{
    display: table;
    width:  100%;
}

.table-businesscard-header
{
    display: table-cell;
    width: 50%;
    border-right: 5px solid black;
}

.table-businesscard-next
{
    display:  table-cell;
    width: 50%;
    background-color: red;
    padding: 30px;
}

.center-both
{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.center2
{
    max-width: 49%;
}
 
I have never used display: table; Look at this (you will need to do a little work on it.)
Code:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title></title>
      <style>
      .element {
        display: inline-block;
        width: 50%;
    }
    #left{
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #right{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #container{
        display: flex;
        justify-content: center;
        align-items: center;
    }</style>
</head>
<body>
<div id="container" style="width: 100%;">
    <div id="left" class="element" style="background-color: palegoldenrod;">
    <h1>Header</h1>
    <p>A paragraph</p>
    </div>

    <div id="right" class="element" style="background-color: peru;">
        <img class="mySlides" src="logo.jpg">
    </div>
</div>
<script>

</script>
</body>
</html>
 
Thank you for your input, it helped :)


However, I still have problems with mobiles - in current display, mobiles do not look good.


The best thing to do would be just to set display: block for mobiles, but... it is not working, I do not know why :/

The CSS code is below:

CSS:
.element
{
    display: inline-block;
    width: 50%;
}
    
#left
{
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
#right
{
    display: flex;
    justify-content: center;
    align-items: center;
}
    
#container
{
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width: 800px)
{
    .element
    {
        display: block;
    }
}

And the result for mobiles is this:

HTML-CSS-bad-mobile.png

Any help? ;-)
 
I kinda played around with the idea of changing width/max-width of various elements, and it is still not working.

PIC:

HTMl-CSS-bad-mobile-2.png

CSS code:

CSS:
.element
{
    display: inline-block;
    width: 50%;
}
    
#left
{
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
#right
{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*

NOT WORKING

#right img
{
    max-width: 100%;
}
*/
    
#container
{
    display: flex;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width: 800px)
{
    .element
    {
        display: block;

        /*

        THIS WORKS NOT

        width: 100%;

        */
    }

/*

THIS ALSO DOESN"T WORK, EVEN IF I SET IT FOR IMG

    #right
    {
        max-width: 100%;
    }
*/
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom