CODEWITHSUNDEEP
htmlcss
GM Kamrussama
GM Kamrussama

Reputation: 25

Left sidebar div does not move up in my HTML layout

I can't fix this gap issue right now. I have attached a screenshot below and also HTML and CSS code.

I tried many times and found it on youtube and StackOverflow, but I can't find anything like this.

The red X highlights the space where the left div should move to:

Please take a look here

*{
    margin: 0%;
}
body{
    background-color: blanchedalmond;
}



/* head div start */
.head{
    width: 80%;
    margin-left: 20%;
}
.headelement{
    background-color: rgb(115, 182, 240);
    height: auto;
}
/* head div end */



/* Left Side Bar Start */
.leftsidebar{
    display: flex;
}
.leftdiv{
    position: absolute;
    width: 20%;
    height: 100%;
}
.leftelement{
    width: auto;
    height: auto;
    background-color: rgb(213, 233, 233);   
}
/* Left Side Bar end */



/* welcome div start  */
.welcomeDiv{
    width: 80%;
    margin-left: 20%;
    position: relative;
}
.welcomeelement{
    width: auto;
    height: auto;
    background-color: rgb(193, 45, 196);
}
/* welcome div end  */



/* Inner 2 div start */
.innerdiv{
    display: flex;
    width: 80%;
    height: auto;
    margin-left: 20%;
    position: relative;
}
.innerelement1{
    width: 50%;
    height: auto;
    background-color: rgb(65, 225, 37); 
}
.innerelement2{
    width: 50%;
    height: auto;
    background-color: rgb(226, 108, 23);
}
/* Inner 2 div end */



/* Footer div start */
.footerdiv{
    width: 100%;
    height: auto;
}
.footerelement{
    width: auto;
    height: auto;
    background-color: rgb(132, 113, 122);
}
/* Footer div end */
<body>
    <div class="head">
            <div class="headelement">
                <h1>Head Div</h1>
            </div>
    </div>
    <div class="leftsidebar">
        <div class="leftdiv">
            <div class="leftelement"> <h1>Left Div</h1></div>
        </div>  
    </div>
    <div class="welcomeDiv">
        <div class="welcomeelement"> 
            <h1>Welcome Div</h1>
        </div>
    </div>
    <div class="innerdiv">
        <div class="innerelement1">
            <h1>Inner no.1 div</h1>
        </div>
        <div class="innerelement2">
            <h1>Inner no.2 div</h1>
        </div>
    </div>
    <div class="footerdiv">
        <div class="footerelement">
            <h1>Footer full width div </h1>
        </div>
    </div>
</body>

Upvotes: 1

Views: 108

Answers (2)

Christian
Christian

Reputation: 5521

Your head div has a width of 100% with a margin of 20% but it still is in the way of the other element. I could also see this in the Chrome DevTools by selecting the element:

enter image description here

enter image description here

Changing the properties on the right did not change the layout.

If the leftsidebar div should move up, you must place it before the other HTML so there is space and it can move up.

The other elements will "auto-magically" arrange themselves around the leftsidebar div. I say magically because I haven't checked all your code regarding flex boxes and positioning.

Rearrange your HTML code. Move the leftsidebar div over the head like so:

<div class="leftsidebar">
    <div class="leftdiv">
    <div class="leftelement"> <h1>Left Div</h1></div>
</div>  
</div>
<div class="head">
    <div class="headelement">
    <h1>Head Div</h1>
    </div>
</div>

Example:

*{
    margin: 0%;
}
body{
    background-color: blanchedalmond;
}



/* head div start */
.head{
    width: 80%;
    margin-left: 20%;
}
.headelement{
    background-color: rgb(115, 182, 240);
    height: auto;
}
/* head div end */



/* Left Side Bar Start */
.leftsidebar{
    display: flex;
}
.leftdiv{
    position: absolute;
    width: 20%;
    height: 100%;
}
.leftelement{
    width: auto;
    height: auto;
    background-color: rgb(213, 233, 233);   
}
/* Left Side Bar end */



/* welcome div start  */
.welcomeDiv{
    width: 80%;
    margin-left: 20%;
    position: relative;
}
.welcomeelement{
    width: auto;
    height: auto;
    background-color: rgb(193, 45, 196);
}
/* welcome div end  */



/* Inner 2 div start */
.innerdiv{
    display: flex;
    width: 80%;
    height: auto;
    margin-left: 20%;
    position: relative;
}
.innerelement1{
    width: 50%;
    height: auto;
    background-color: rgb(65, 225, 37); 
}
.innerelement2{
    width: 50%;
    height: auto;
    background-color: rgb(226, 108, 23);
}
/* Inner 2 div end */



/* Footer div start */
.footerdiv{
    width: 100%;
    height: auto;
}
.footerelement{
    width: auto;
    height: auto;
    background-color: rgb(132, 113, 122);
}
/* Footer div end */
<body>
    <div class="leftsidebar">
        <div class="leftdiv">
            <div class="leftelement"> <h1>Left Div</h1></div>
        </div>  
    </div>
    <div class="head">
            <div class="headelement">
                <h1>Head Div</h1>
            </div>
    </div>
    <div class="welcomeDiv">
        <div class="welcomeelement"> 
            <h1>Welcome Div</h1>
        </div>
    </div>
    <div class="innerdiv">
        <div class="innerelement1">
            <h1>Inner no.1 div</h1>
        </div>
        <div class="innerelement2">
            <h1>Inner no.2 div</h1>
        </div>
    </div>
    <div class="footerdiv">
        <div class="footerelement">
            <h1>Footer full width div </h1>
        </div>
    </div>
</body>
enter image description here

Upvotes: 3

Alana R&#232;yes
Alana R&#232;yes

Reputation: 37

try

position:relative; bottom:10px;

instead of

position absolute.

and see if it moves and add more pixels to bottom:10px; if needed. or try the margin-bottom property.

Upvotes: 0

Related Questions