How to position this
under
?

Question

.footer {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  min-height: 30vh;
  background-color: #a44949;
  font-family: 'Open Sans', sans-serif;
}

.footer-list {
  display: flex;
  justify-content: space-around;
}

<div class="footer">
  <h4>Kontakt</h4>
  <ul class="footer-list">
    <li>Mobilni: 062/329-077</li>
  </ul>
  <h4>Podaci</h4>
  <ul class="footer-list">
    <li>PIB: 112295370</li>
    <li>Matični broj: 66007057</li>
  </ul>
  <h4>Lokacija</h4>
  <ul class="footer-list">
    <li>Oslobođenja 32c, Rumenka</li>
  </ul>
</div>

How it looks like: click

I want those ul elements placed under the h4 , how do I do it? did I mess something up or? I will add more stuff to it, I planned to add a google map for the location too

EDIT: Another issue

So, I've solved my first and second issue, now here comes the third. Added a map thumbnail, h4 positioning kinda got messed up as you can see here

enter code herehttps://jsfiddle.net/sushmee/nz1txweh/1/

EDIT2: And another issue

How to fix this div with p and text in it, goes under footer instead of expanding the body? I have another line of text, you just cant see it

You left `flex-direction` of the container at the default `row`, so all items will by laid out next to each other. But switching it to `column` won’t achieve what you want here either. You should start by wrapping each H4 and its corresponding UL into an additional element. — CBroe, Mar 10 '21 at 12:55

score 0 · Accepted Answer · answered Mar 10 '21 at 12:56

.footer {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  min-height: 30vh;
  background-color: #a44949;
  font-family: 'Open Sans', sans-serif;
}

<div class="footer">
  <div>
  <h4>Kontakt</h4>
  <ul>
    <li>Mobilni: 062/329-077</li>
  </ul>
  </div>
  <div>
  <h4>Podaci</h4>
  <ul>
    <li>PIB: 112295370</li>
    <li>Matični broj: 66007057</li>
  </ul>
  </div>
  <div>
  <h4>Lokacija</h4>
  <ul>
    <li>Oslobođenja 32c, Rumenka</li>
  </ul>
  </div>
</div>

That solved it, awesome! Now, one more issue. How do I place li Maticni broj under PIB? Edit: Solved it, changed display from flex to block — sushmee, Mar 10 '21 at 13:19

David Thomas · Answer 2 · 2021-03-10T13:42:49.413

You have a couple of options, the first is to stay with CSS flex layout, and wrap the <h4> elements into a 'wrapping' element with its associated <ul>, and the second – as you want to align across columns and rows – is to use CSS grid layout.

To show the first option, because you're effectively showing a navigation list with associated lists, we wrap the <h4> elements along with its associated <ul> in a wrapper <li> element which, of course, requires either a <ul> or <ol> parent.

I've effectively stripped out all of the styling, so you will need to reintroduce the styles required to position the .footer element, but this should be enough to show you how to visually align the elements:

/* a basic reset so that elements are sized, and
   spaced, consistently: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* removing all list-markers from the <ul> elements
   within the .footer element: */
.footer ul {
  list-style-type: none;
}

.footer-list {
  display: flex;
  justify-content: space-between;
}

/* to show how a marker could be added back to the
   descendant <li> elements that follow the <h4>:  */
h4 + ul ::marker {
  /* a right guillemet, using unicode: */
  content: '\00BB';
  width: 0.5em;
}

h4 + ul li {
  /* making space for the marker: */
  margin-left: 0.6em;
}

<div class="footer">
  <!-- this element serves to wrap each of the content 'columns'
       in <li> elements in order that flex-box layout can
       position the <h4> along with its associated list of
       links; the class-name is used for ease-of-selecting: -->
  <ul class="footer-list">
    <li>
      <h4>Kontakt</h4>
      <ul>
        <li>Mobilni: 062/329-077</li>
      </ul>
    </li>

    <li>
      <h4>Podaci</h4>
      <ul>
        <li>PIB: 112295370</li>
        <li>Matični broj: 66007057</li>
      </ul>
    </li>
    <li>
      <h4>Lokacija</h4>
      <ul>
        <li>Oslobođenja 32c, Rumenka</li>
      </ul>

    </li>
  </ul>
</div>

JS Fiddle demo.

The second option, as mentioned above, is to use CSS grid, though because this does not wrap the relevant <h4> and <ul> within the same parent, this is somewhat brittle, but can be used:

/* a basic reset so that elements are sized, and
   spaced, consistently: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* removing all list-markers from the <ul> elements
   within the .footer element: */
.footer ul {
  list-style-type: none;
}

.footer {
  display: grid;
  /* because we're positioning the elements in pairs,
     one h4 to one ul, we use two rows and direct the
     layout to place elements in column direction
     instead of rows: */
  grid-template-rows: repeat(2, min-content);
  grid-auto-flow: column;
}

<div class="footer">
      <h4>Kontakt</h4>
      <ul>
        <li>Mobilni: 062/329-077</li>
      </ul>
      
      <h4>Podaci</h4>
      <ul>
        <li>PIB: 112295370</li>
        <li>Matični broj: 66007057</li>
      </ul>
      <h4>Lokacija</h4>
      <ul>
        <li>Oslobođenja 32c, Rumenka</li>
      </ul>
      
</div>

JS Fiddle demo.

References:

Bibliography:

"Adding HTML entities using CSS content."
"Basic concepts of flexbox."
"CSS Grid Layout."
"A Complete Guide to Flexbox."
"A Complete Guide to Grid."

Solved my issue, but holy dang, you did your job :) But I have another issue, I posted what's wrong — sushmee, Mar 10 '21 at 16:01

How to position this under ?

?

2 Answers2

How to position this
under
?