HTML - align 3 elements left right and center, but move middle one to left if no space

Question

I have three elements, see picture below

This is a 1080p screen and it works fine. However, on smaller screens, the right side overlaps the center banner, see picture below

How can i fix this? Below is my code

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<div class="w3-container aq-purple" style="box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">


                <img src="images/ficon.png" style="position:absolute;left:30px;top:4px;width:100px">
                <div align="center">
                    <img src="fbanner.png" style="margin-top:15px;width:100%;max-width:500px;">
                </div>
                <div  style="position:absolute;right:15px;top:60px;bottom:0px">
                    <ul class="w3-navbar" style="position:relative;bottom:0px;height:40px">
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html">
                                Classes
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="events.html">
                                Events
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="gallery.html">
                                Gallery
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="donations.html">
                                Donate
                            </a>
                        </li>
                        <li>
                            <a class="w3-hover-amber w3-border aq-border-gold" href="contact.html">
                                Contact Us
                            </a>
                        </li>
                    </ul>
                </div>

The icon on the left, and navbar on the right are correct. The middle banner needs to be centered in the screen. However, when the screen is small, it overlaps. I need it to move over if theres a lack of space

Your fiddle seems to have many errors – Theodore K. Aug 12 '16 at 14:20 — Theodore K., Aug 12 '16 at 14:20
http://stackoverflow.com/a/32122011/3597276 – Michael Benjamin Aug 12 '16 at 14:22 — Michael Benjamin, Aug 12 '16 at 14:22
You ask for it to be fixed, but what do you want it to do? – Lee Aug 12 '16 at 14:32 — Lee, Aug 12 '16 at 14:32

score 2 · Answer 1 · answered Aug 12 '16 at 14:28

.wrapper {
  display: flex;
  height: 3em;
}

ul,
li {
  list-style: none;
  padding: 0 4px;
}

.left,
.middle,
.right,
li {
  display: inline-block;
  height: 100%;
}
.left {
  background-color: black;
  flex: 0 0 3em;
}
.middle {
  background-color: brown;
  flex: 10 1;
  color: yellow;
  line-height: 3em;
  text-align: center;
}
.right {
  background-color: lightgrey;
  flex: 1 0;
  white-space: nowrap;
}

<div class="wrapper">
  <div class="left">
  </div>
  <div class="middle">Middle middle middle
  </div>
  <div class="right">
    <ul>
      <li><a href="#">first</a>
      </li>
      <li><a href="#">second</a>
      </li>
      <li><a href="#">third</a>
      </li>
    </ul>
  </div>
</div>

thanks but thats not quite what i meant. Your solution pins left and right correctly but then centres the red part between them. i want the red part in the center of the page, not the center of the left and right. — Hamzah Malik, Aug 12 '16 at 14:54

HTML - align 3 elements left right and center, but move middle one to left if no space

1 Answers1