How to position this <ul> under <h4>? - html

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:
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

Answer 1

.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>

Answer 2

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:
Adjacent-sibling (+) combinator.
display.
grid-auto-flow.
grid-template-columns.
grid-template-rows.
justify-content.
list-style-type.
::marker.
repeat().
Bibliography:
"Adding HTML entities using CSS content."
"Basic concepts of flexbox."
"CSS Grid Layout."
"A Complete Guide to Flexbox."
"A Complete Guide to Grid."