Flex space-between not functioning properly for row layout in HTML and CSS

As a beginner in learning CSS, I am seeking guidance and insights. I am aiming to achieve a layout similar to the one shown in Pic1.

https://i.sstatic.net/Mmfpw.png

Below is the HTML & CSS code I have attempted:

.header {
    background-color: yellow;
    display: flex;
}

.left {
    display: flex;
    background-color: coral;
}

.right {
    background-color: aqua;
    display: flex;
    justify-content: space-between;
}
<div class="header">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <div class="right-1">
            <p>Right-1</p>
        </div>
        <div class="right-2">
            <p>Right-2</p>
        </div>
    </div>
</div>

This is what I have achieved with the code above:

https://i.sstatic.net/acbvC.png

I can successfully align two divs (e.g., left and right) in a row without nesting them. However, when I remove 'display: flex' from '.header', 'Right-1' and 'Right-2' stack on top of each other while still maintaining the space between them. Here is the result after removing 'display: flex' from '.header':

https://i.sstatic.net/iEsLz.png

Your assistance is greatly appreciated as I aim to achieve a layout with three flex items in a single row - one fixed and two spaced apart.

htmlcss

Answer №1

Here is a quick solution, and I recommend checking out this helpful Flexbox Tutorial to grasp the basics of flexbox layout.

.header {
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.left {
  display: flex;
  background-color: coral;
  width: 150px;
}

.right {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  flex-grow: 1
}

.right-1, .right-2 {
  border: 1px solid black;
}
<body>
  <div class="header">
    <div class="left">
      <p>Left</p>
    </div>
    <div class="right">
      <div class="right-1">
        <p>Right-1</p>
      </div>
      <div class="right-2">
        <p>Right-2</p>
      </div>

    </div>
  </div>
</body>

Answer №2

To increase the size of the div.right, you can include flex-grow: 2; which will result in the following styling:

.right {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  /* new code */
  flex-grow: 2;
}

Answer №3

.header{
  /* Styling for header section */
  display: flex;
  justify-content: space-between;
  background: lightblue;
  padding: 10px;
}
.left{
  /* Styling for left side */
  background: lightyellow;
  width: 10%;
  padding: 10px;
}
.right{
  /* Styling for right side */
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 10px;
  background:lightyellow;
}
.right-1, .right-2 {
  border: 1px solid;
  width: 100px;
}
<body>
  <div class="header">
    <div class="left">
      <p>Left</p>
    </div>
    <div class="right">
      <div class="right-1">
        <p>Right-1</p>
      </div>
      <div class="right-2">
        <p>Right-2</p>
      </div>

    </div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a responsive fixed div/nav that adjusts its size based on the container it is placed within

Just starting out in web development and struggling with this issue. Any assistance would be much appreciated! When resizing the window, the fixed div moves outside of its container instead of resizing. The navigation bar on the website I'm working o ...

javascriptjqueryhtmlcssfixed

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

javascripthtmljquerycssbootstrap-5

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

IDE: Unusual hues in HTML IDs and class parameter inputs

Netbeans is my new favorite tool, but I'm struggling to figure out how to change the font of html id and class parameter values. Right now, they're blending in with the tags and have a distracting background color. I've browsed through Tool ...

htmlnetbeanssyntax-highlighting

Error in height calculation due to setting the CSS property line-height

I am facing a challenge in setting the height of a parent ul element based on the included li's. The issue arises when the CSS property line-height contains fractional digits, causing inaccuracies in the calculation. This results in the calculated hei ...

javascriptjqueryheightcss

Utilizing different levels of `<div>` within the card-body component in Bootstrap5

While following a web application tutorial on YouTube, I encountered a question. The code snippet is shown below: <div class="card card-body"> ... </div> The resulting output is displayed in this image: https://i.sstatic.net/D3iBL.p ...

htmlbootstrap-5bootstrap-cards

Issue encountered while appending new rows to the tbody of a table

I'm encountering an issue with the append function within a for loop in my code. The string being passed to the function isn't parsing correctly and results in an error. How can I go about resolving this problem? Thanks! function getDetailPopUp ...

javascriptjqueryhtml

The functionality of Bootstrap 4's sticky-top for the navigation bar has suddenly ceased

Recently, I encountered an issue with my navigation bar that was set to stick to the top while scrolling. Everything was working perfectly until I decided to move the login button to the right side. Despite numerous attempts to modify the position of the l ...

htmlcssbootstrap-4navbar

I am struggling to successfully upload a video in Laravel

In this section, the Ajax functionality is used to add a video URL to the database. The values for the Video title and description are successfully being saved in the database, but there seems to be an issue with retrieving the URL. <div class="m ...

javascripthtmljqueryajaxlaravel

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll? <section class="section section-padding"> <div class="container"> ...

csshtmlbootstrap-4

What could be causing the button element to not appear alongside the input form?

I'm facing an issue with the positioning of elements that I don't usually encounter. I simply want the subscribe button to be 20% wide and positioned to the left of the input form. Despite trying various methods like block display, inline, or fl ...

htmlcss

Angular 2: Implementing a Universal CSS Style Sheet

Is there a way to include a universal CSS file in Angular 2 applications? Currently, I have multiple components that share the same button styling, but each component has its own CSS file containing the styles. This setup makes it difficult to make changes ...

cssangularangular-cli

Extracting data from websites and importing it into Excel with VBA

I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...

htmlexcelvbaweb-scraping

Bootstrap Item Carousel - A Sleek Way to Showcase

I'm trying to figure out how to stop the infinite auto-scrolling and make it display per page when clicking the right arrow. Any ideas? $('.carousel.carousel-multi .item').each(function () { var next = $(this).next(); if (!next.leng ...

javascriptjqueryhtmlcsstwitter-bootstrap

Two horizontal lines placed side by side on one line

Just getting started with CSS and HTML for a school project here. I currently have 2 vertical lines set up like this. <hr class="topline" width=58% size=3 NOSHADE> <hr class="verticalline" width=0.15% size=1000 NOSHADE> I've ...

htmlcss

Display an HTML file using HTML5

Is it possible to include or display one HTML file within another? Main HTML file: <html> <body> <div><!-- insert other HTML file here --></div> </body> </html> File to be displayed: <h1>Testing&l ...

htmlrender

Utilizing HTML snippets for AJAX integration

Let's dive in, I may be completely off track here. I am currently working with Wordpress. On a page I am creating an HTML select menu (Main Menu) with options that correspond to each page on the site. This menu is visible on the page. In addition, ...

phphtmlajax

What are the differences in performance between jQuery and other libraries?

Which option offers superior performance? $('input[data-confirm],a[data-confirm],button[data-confirm]'); or $('[data-confirm]'); The $('[data-confirm]') selector is more versatile, but does it require jQuery to search thro ...

jqueryhtml

JQUERY is unable to recognize the property or method 'menu' for this object

How can I create a menu using an existing UL from a large HTML file called index.html? Here is the code snippet: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Menu - Default functionality< ...

javascriptjquerycssmenu

Making alterations to the HTML code of a Tumblr theme in order to eliminate specific

Here is my custom Tumblr domain URL: http://intchauhan.com/ I would like to eliminate the "Follow intchauhan" and "tumblr." buttons located on the right side. Below is the HTML of the theme: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

javascripthtmlcsswebtumblr