Question 246288 in CSS Question posted in
Some basic documentation can be found here.

Css – three column header needs to respond to a two column one with middle column below outer ones

Very typical header consisting of "LOGO | MENU | ICON" needs to respond to "LOGO | ICON" in a row, with MENU below that row.

I tried Flexbox but I don’t see anything that can bump down the middle box (in this case, the menu).

div#left {
  width: 397px;
  float: left;
  background: red;
  color: white;
}

div#middle {
  min-width: 955px;
  float: left;
  background: gray;
  color: white;
}

div#right {
  width: 88px;
  float: left;
  background: blue;
  color: white;
}
<div id="left">LOGO</div>
<div id="middle">MENU</div>
<div id="right">ICON</div>

http://brinsterinc.com/three_column_responsive.html

I need the MENU to move below the LOGO | ICON when the window is not wide enough to show everything. Thanks!

Tags:

2

Answers


  1. 0

    https://developer.mozilla.org/en-US/docs/Web/CSS/order is what you’re after. Consider looking at a framework like Tailwind or Bootstrap too.

    Login or Signup to reply.
  2. 0

    Perhaps flex can work with the sizes and a wrap. No need for the floating with the space-between then

    Note I also used classes rather than id’s to style as a more flexible pattern – and have a header element wrapping it for the style.

    header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 397px 1 88px;
  justify-content: space-between;
}

.left {
  background-color: red;
  color: white;
}

.middle {
  min-width: 955px;
  background-color: gray;
  color: white;
}

.right {
  background-color: blue;
  color: white;
}
    <header>
  <div class="left">LOGO</div>
  <div class="middle">MENU</div>
  <div class="right">ICON</div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search