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

CSS webdesign footer positioning – Html

There is a problem with styling footer and with class "sloupec1" and "sloupec2"please help me.

<footer>
    <div class="sloupec1">
        <h3>VŠE O NÁKUPU</h3>
        <ul>
            <li><a href="#">Obchodní podmínky</a></li>
            <li><a href="#">Možnosti doručení</a></li>
            <li><a href="#">Možnosti platby</a></li>
        </ul>
    </div>
    <div class="sloupec2">
        <h3>O SPOLEČNOSTI</h3>
        <p>Základní informace</p>
        <p>Kontakt</p>
    </div>
    
    <div class="copyright">
        &copy; 2023 Mojezahrada.cz Všechna práva vyhrazena.
    </div>
</footer>

I need to style 2 columns adjacent, tried float but it don’t work. So I ask AI it only tell me something with flexbox, but it don’t work well. I need to get really similar footer like this:

Web design:

https://cdn.discordapp.com/attachments/1083872226476032121/1083873552274554920/tohle_je_navrh_webu_upraveno.png
all code (html+css) without images:
https://pastebin.com/KSfguz0j

Next problem is I need to make this website responsive.

Tags:

2

Answers


  1. 0

    Here is how you can use display: flex; to place 2 divs adjacent to each other

    .flex {
  display: flex;
}
    <div class="flex">
  <div>Column 1</div>
  <div>Column 2</div>
</div>
    Login or Signup to reply.
  2. 0

    Do this, it will work.

    In this code, I added a div and applied flex display to it and by default the justify-content value is flex-start so just add auto margins to the 2nd div and it will be centered in the only available empty space.

    .sloupecs-container {
  display: flex;
}

.sloupec2 {
  margin-left: auto;
  margin-right: auto;
}
    <footer>
  <div class="sloupecs-container"> 
    <div class="sloupec1">
        <h3>VŠE O NÁKUPU</h3>
        <ul>
            <li><a href="#">Obchodní podmínky</a></li>
            <li><a href="#">Možnosti doručení</a></li>
            <li><a href="#">Možnosti platby</a></li>
        </ul>
    </div>
    <div class="sloupec2">
        <h3>O SPOLEČNOSTI</h3>
        <p>Základní informace</p>
        <p>Kontakt</p>
    </div>
  </div>
  <div class="copyright">
      &copy; 2023 Mojezahrada.cz Všechna práva vyhrazena.
  </div>
</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search