Question 42585 in Html Question posted in
Some basic documentation can be found here.

Why does adding margin to my table move donw my sidebar and how can I fix this? – Html

I have a site with a sidebar and a table being the center of the content. I am trying to move the table down from the top of the screen but any attempt aat margin or padding move the sidebar down in line with it.

*{
    margin:0;
    padding:0;
    list-style: none;
}

body{
    background-color:#292929;
}

.sidebar-menu{
    background-color:#0A0A0A;
    display:flex;
    flex-direction: column;
    width:100px;
    position: fixed;
    height:100%;
    padding: 20px;
    padding-bottom:100px;
    justify-content: top;
    align-items: center;
    border-right: 3px solid #1098F7;
    z-index:1;
}

.sidebar-items{
    margin:40px 0;
}

.sidebar-items:hover{
    color:#1098F7;
}

#sidebar-logo{
    color:#1098F7;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size: 40px;
    margin-top:400px;
    user-select: none;
    }

.fa-solid{
    color:white;
}
.fa-solid:hover{
    color:#1098F7;
}

.table-container {
    margin-left: 143px;
    width: calc(100vw - 143px);
    margin-top: 100px;
    padding:100px;
}

table{
    font-size:30px;
    color:white;
    border-collapse: separate;
    border-spacing: 0 10px; 
    margin-top: -10px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    min-width:1300px;
    margin: auto;
}

@media (max-width:1400px) {
    table{
        min-width: 1000px;
    }
    
}

@media (max-width:1000px) {
    table{
        min-width: 600px;
    }
    
}

tbody tr{
    color:rgb(216, 216, 216);
    background-color: #122d5661;
    height:60px;
}

thead tr{
    color: #1098F7;
    background-color:rgba(9, 4, 31, 0);
}

th, td{
    text-align:center;
    padding:7px 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 20px; 
    border-top-right-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}
<div class="sidebar">
    <ul class="sidebar-menu">
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
        <h1 id="sidebar-logo">HMH</h1>
    </ul>

</div>

<div class="table-container">
    <table>
        <thead> 

            <tr>
                <th>ACTIVITY</th>
                <th>TIME</th>
                <th>DAYS</th>
                <th>T.P.D</th>
                <th>TODAY</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>run</td>
                <td>data</td>
                <td>112</td>
                <td>112</td>
                <td>Yes</td>
            </tr>
        </tbody>

Google inspect is showing me that it is actually moving the body down as well which makes even less sense to me. Any help much appreciated, thank you.

Tags:

4

Answers


  1. 0

    try to use position:relative or absolute on the main div, problem will fix this error, use top, right, bottom or left to adjust the position. Because creating margin and padding will only add more px at your code.

    If you have any more question just write me back than we can solve this problem 🙂

    Login or Signup to reply.
  2. 0

    Apply this css to class sidebar:

      .sidebar{
  position: fixed;
    top: 0;
}
    Login or Signup to reply.
  3. 0

    Try to add the div outside the html code you have right now:

        <div class="test">
        <div class="sidebar">
            <ul class="sidebar-menu">
                <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
                <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
                <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
                <h1 id="sidebar-logo">HMH</h1>
            </ul>
        
        </div>
        
        <div class="table-container">
            <table>
                <thead> 
        
                    <tr>
                        <th>ACTIVITY</th>
                        <th>TIME</th>
                        <th>DAYS</th>
                        <th>T.P.D</th>
                        <th>TODAY</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr>
                        <td>run</td>
                        <td>data</td>
                        <td>112</td>
                        <td>112</td>
                        <td>Yes</td>
                    </tr>
                </tbody>
            </div>

    And then add relative position and absolute position in CSS

    .test {
    position: relative;
  }

.table-container {
    position: absolute;
    margin-left: 143px;
    width: calc(100vw - 143px);
    margin-top: 100px;
    padding:100px;
}
    Login or Signup to reply.
  4. 0

    Good day!

    You can add this to your CSS file:

    .sidebar{
    position: fixed;
    top: 10px;
    left: 10px;
}

    With that, the sidebar stays put while you can freely change the position of your table through margin and padding.

    Hope this helps, have a nice day! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search