CODEWITHSUNDEEP
htmlcss
qeadz
qeadz

Reputation: 1516

Position spans next to each other

What I am trying to do is have a fixed header, fixed footer with a section inbetween. The inbetween section would then get a scrollbar should the content not fit on screen. After much frustration I managed to get the main layout rendering correctly without using tables:

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="main-container">
    <div class="main-container top-bar">
      SOMETHING FIXED HERE
    </div>
    <div class="main-container main-view">
      <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
    <div class="main-container bottom-bar" id="bottom-bar">
      SOMETHING FIXED HERE
    </div>
  </div>
</body>

</html>

However elements in the middle area only render correctly if they are not wrapped in any kind of tag. As soon as I wrap them in a div or span, the browser (Chrome at least) insists on having each tag take up the entire line. They do not appear side-by-side as I might expect.

I have tried creating a 'special' class, as noted in the example above, which I have applied to both div and span. Both give the same result: 'Lorem' and 'ipsum' appear on their own lines instead of side-by-side. I tried various things from other stack overflow questions on somewhat related topics including "float: left" and additional nesting using "display: flex".

I simply want to apply some styling and perhaps make some items clickable. To do that they need to be wrapped in something like a div or span. Anyone know how I can get it to render them side-by-side instead of each tag on its own line?

Upvotes: 0

Views: 129

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

This is the nature of the flexbox. You gave the container the property of column for the flex-direction. The .special elements are being treated as flex items and getting arranged in a column. Simply wrap them all in a div so you have a single flex item so the inline display can kick in

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
}
<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <div>
      <span class="special">Lorem</span> <span class="special"> ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate
      semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
    </div>
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>

Alternatively, you can utilize flex-direction: row on your flex container (in this case .main-view) so your flex items can display "side-by-side" instead of being stacked in a column. See sample below:

.main-container {
  width: 50%;
  height: 98vh;
  flex-direction: column;
  display: flex;
}

.main-container .main-view {
  width: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
  flex-direction: row;
}

.main-container .top-bar {
  width: 100%;
  flex: 0 0 1em;
  text-align: center;
}

.main-container .bottom-bar {
  width: 100%;
  flex: 0 0 1em;
}

.special {
  display: inline;
  margin-right: 10px;
}
<div class="main-container">
  <div class="main-container top-bar">
    SOMETHING FIXED HERE
  </div>
  <div class="main-container main-view">
    <span class="special">Lorem</span><span class="special">ipsum</span>Hello
  </div>
  <div class="main-container bottom-bar" id="bottom-bar">
    SOMETHING FIXED HERE
  </div>
</div>

Upvotes: 1

cam
cam

Reputation: 3616

Your particular issue is because your .main-container class has display: flex; on it and then you've added that class to the top, center and bottom divs, this flex property changes the way that child elements are positioned.

As it sounds like you dont want to mess with the positioning of children elements of the main (middle) div, you dont want to add the 'main-container' class to that div.

Actually, you can achieve what you want much more simply:

      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }

Here we're making the body always 100vh (100% viewport height) and changing the display to flex, direction column. Setting these flex properties allows us to tell the main-view container to flex-grow which means fill the remaining space of the parent, this pushes the footer down to the bottom of the body element (which is set to 100vh).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      
      .main-view {
        flex-grow: 1;
        overflow: scroll;
      }
    </style>
</head>
<body>
  <div class="top-bar">
      SOMETHING FIXED HERE
  </div>
        <div class="main-view">
            <span class="special">Lorem</span><span class="special">ipsum</span> dolor sit amet, consectetur adipiscing elit. Pellentesque magna tellus, dictum et luctus ac, laoreet vel justo. Cras at pretium lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas tincidunt efficitur neque, eu elementum purus tincidunt vel. Nunc id dolor bibendum, pharetra erat in, pretium lorem. Donec vitae nulla et lacus porta scelerisque. Praesent blandit, nibh nec vulputate semper, arcu odio scelerisque velit, at rhoncus lacus dui luctus sapien. Donec venenatis erat libero, vitae lobortis velit finibus ut.
        </div>
        <div class="bottom-bar">
            SOMETHING FIXED HERE
        </div>
    </div>
</body>
</html>

Upvotes: 1

Related Questions