how to add an automatic padding left to a div based on the position of another div

user_12009071 0
Viewed 46

I have the following footer that is broken to 2 part: an upper part and a lower part: enter image description here

The upper part of the footer contains 4 divs and its css has:

display:flex;
justify-content:space-between;

While the lower part contains 3 divs (1 is completely empty) and also its css has:

display:flex
justify-content:space-between;

What I want is to make the unordered list that starts with TERMS & CONDITIONS in the bottom part of the footer to start just under the unordered list that ends with BEST PLAYERS in the upper part of the footer, so along this red line: enter image description here

css
1 Answers

The best way to do this, is to rearrange you html code: Instead of making two rows footer, make it one row with two columns, the first column is for the logo and the second column divided into two rows as well, with three columns

<div class="row">
<div class="col-3">
    <div class="logo">
        <img src="your-logo.png" alt="logo">
    </div>
</div>
<div class="col-9">
    <div class="row">
        <div class="col-4">fixtures</div>
        <div class="col-4">latest tweets</div>
        <div class="col-4">follow</div>
    </div>
    <div class="row">
        <div class="col-4">blank</div>
        <div class="col-4">terms & privary</div>
        <div class="col-4">social icons</div>
    </div>
</div>
user_48595020
Related