CSS — The flexbox layout does not support the use of margin-left and margin-right properties

My index.html layout in a desktop window screen involves using flexbox to have two div elements in one row, a long div element in the second row, and two div elements in the third row, with one containing a list. I want spacing between the div elements in the first and third rows, but when I tried using margin-left or margin-right, they ended up collapsing on top of each other.

I attempted to change the width of each div element, but they still collapsed on top of each other. Using justify-content and align-content on the content class didn't work either.

[CSS code snippet]

htmlcssflexboxmargins

Answer №1

To ensure that multiple items appear on the same row with each element taking up half of the row's width, you can enclose them in a 

<div class="row"></div>
. This setup will also consider the margin between the items.

The crucial CSS styling for achieving this layout is as follows:

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin: 10px 0;
}

This configuration ensures that each row element spans 100% of its parent container, in this case being the container element.

You just need to define the width and margin for both .div-content and .div-list:

width: 50%;
margin: 0 10px;

Refer to the code snippet below for a visual representation of this implementation.

Answer №2

Consider placing the elements in a flex container to easily adjust column widths. Here is an example of the code structure:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}

.div-content-container {
  display: flex;
}

.div-content {
  margin: 0 10px;
  flex: 1 0 auto;
}
<header>
  <h1 class="title">CSS Basics</h1>
</header>

<div class="content">
  <div class="div-content-container">
    <div class="div-content item-1">
      <h2>What is Lorem Ipsum?</h2>
      <p>...</p>
    </div>

    <div class="div-content item-2">
      <h2>Diego Salas</h2>
      <p>...</p>
    </div>
  </div>
  <div class="div-content grow">
    <h2>Diego's Favorite Dogs</h2>
    <p>...</p>
  </div>
  <div class="div-content-container">
    <div class="div-content div-list">
      <h2>Diego's Favorite Programming Language</h2>
      <ul class="unordered_list">
        <li>Python</li>
        <li>Java</li>
        <li>C/C++</li>
        <li>JavaScript</li>
      </ul>
    </div>
    <div class="div-content">
      <h2>Why do we use it?</h2>
      <p>...</p>
    </div>
  </div>
</div>

<footer>
  <p>CSS Basics &copy; Diego Salas</p>
</footer>

Answer №3

In this section, you have the ability to adjust the width and add margin based on full width. Furthermore, in responsive mode, you can modify the width for full width as well.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}


/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}

.div-content,
.div-list {
    padding: 0.75em;
    border-radius: 12px;
    margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
    margin-top: 0.3125em;
    padding: 0 0.625em;
}

.div-content {
    background-color: #25476c;
}

.div-list {
    background-color: #564B75;
}


/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.div-content {
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

.div-content.rightdiv {
    width: 48.5%;
    margin:5px 1% 5px 0.5%;
}

.grow {
    width: 98%;
    margin:5px 1%;
}

.div-list {
    flex-grow: 1;
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

footer {
    flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content item-2 rightdiv">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by injected
                humour, or randomised words which don't look even slightly believable.
                If you are going to use a passage of Lorem Ipsum, you need to be sure
                there isn't anything embarrassing hidden in the middle of text. All the
                Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. It
                uses a dictionary of over 200 Latin words, combined with a handful of
                model sentence structures, to generate Lorem Ipsum which looks
                reasonable. The generated Lorem Ipsum is therefore always free
                from repetition, injected humour, or non-characteristic words etc.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content rightdiv">
            <h2>Why do we use it?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>

Answer №4

Dealing with margins in flexbox can sometimes be a bit tricky. One approach is to set the width of the flex container to 100vw - 1em and then apply a margin of 0.5em with auto. This ensures that all elements have an equal margin around them once a 0.5em margin is added to each element. It's important to note that nothing collapses unless you increase the flex basis of items on the same row until they no longer fit.

body {
    margin: 0;
    padding: 0;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;

    /* Adjust flex container margin values as needed */
    width: calc(100vw - 1em);
    margin: 0.5em auto;

    /* Ensure the margin value corresponds to the desired margin */
}

.flex-container .child-flex-element {
    font-family: sans-serif;
    background: seagreen;
    color: white;
    margin: 0.5em;
    padding: 2em;
}

/* Individual widths can be adjusted using flex-basis or max/min-width properties */

/* Media queries can also be used for responsiveness */
#item-one {
    flex-basis: 100%;
    height: calc(16vh - 5em);
}

#item-two {
    flex-basis: calc(50% - 5em);
}

#item-three {
    flex-basis: calc(50% - 5em);
}

#item-four {
    flex-basis: 100%;
}

#item-five {
    flex-basis:  100%;
    height: calc(16vh - 5em);
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flex-container">
        <div id="item-one" class="child-flex-element">Header</div>
        <div id="item-two" class="child-flex-element">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. 
             </p>
        </div>
        <div id="item-three" class="child-flex-element">
            <h2>Diego Salas</h2>
              </div>
         <div id="item-four" class="child-flex-element">
           <ul class="unordered_list">
               <li>Python</li>
               <li>Java</li>
              <li>C/C++</li>
                 <li>JavaScript</li>
          </ul>
        </div>
      <div id="item-five" class="child-flex-element">Footer</div>
   </div>
</body>
</html>

Answer №5

To implement inline-flex styling, apply it to the main container:

.container{
  display: inline-flex;
}

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 navigation bar using your own custom CSS styling

While working on a website using bootstrap, I encountered an issue with responsiveness when adjusting the text size and gap of the navigation items. By increasing the size and adding a gap through fs-4 and style="gap: 10vh;", the default small si ...

htmlcssbootstrap-5

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

When I have this code, the ".active" function doesn't work when clicked. However, if I change the div class from "top-menu-popup" to "top-menu-popup active" when opening the page, the menu is already activated. <div class="top-menu-popup"> ...

css

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

csssafari

I'm having trouble with my code - I suspect the issue might be related to the header() function

When I execute the following code, it resets the form and keeps me on the same page. I am aiming for it to redirect to home.php after a successful login. I believe there is an issue with my header() I have experimented with different approaches and have ...

phphtmlmysql

What is the best location to insert CSS in an HTML document?

I tried to customize the CSS on my Blogger blog, but unfortunately, I am unable to access the theme designer. As a result, I attempted to add CSS directly into the code using tags. However, I am having trouble locating the tag within the HTML file. This is ...

htmlcssxmlbloggerblogger-dynamic-views

Creating generic types for a function that builds <options>

I have encountered a situation in my application where I need to loop through an array to construct a list of <option> tags. To streamline this process, I am attempting to create a universal function. function optionValues<T, K extends keyof T> ...

htmltypescriptjsx

apostrophe cutting off a portion of the input field's value

I am facing an issue with a reloaded input box on a web page that is updated through an ajax call. Whenever the input contains a single quote, the rest of the value gets cut off. How can I resolve this problem? The value assigned to myVal dynamically from ...

javajavascriptjqueryhtml

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

javascripthtmlcssreactjsmaterial-ui

Stingray Riverbed SteelApp, showcasing an image on a maintenance landing page

We have implemented a feature on riverbed stingray that displays a maintenance page whenever the system administrator needs to update the application. In order to achieve this, we designed a custom HTML page with a logo image and uploaded both the .html an ...

htmlstingray

What methods can I use to verify that the form data has been effectively stored in the database?

Here's the code snippet I've been working on: <?php // Establishing connection to the database require("database.php"); try{ // Prepare and bind parameters $stmt = $conn->prepare("INSERT INTO clients (phonenumber, firstname) VALUES (:ph ...

phphtmlmysqlpdo

Struggling to eliminate margins in a React web application

Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...

cssreactjsreact-redux

The HTML checkbox is initialized as checked when the page loads

Is there a way to set the checkbox as unchecked in HTML? I have tried multiple ways, but it always loads as checked <input id="chkBox" checked type="checkbox" /> <input id="chkBox" checked=false type="checkbox" /> <input id="chkBox" checked ...

htmlcheckbox

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

csshtml

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

Displaying the Polymer Paper spinner when the page is still loading

How can I make the polymer paper spinner display while the body tag is set to unresolved? I'm experiencing a brief blank screen before the page finishes loading. I'm feeling lost and unsure of how to begin. Check out the Polymer Project documen ...

jqueryhtmlpolymer

Divide an HTML file into separate documents upon submitting a form

Is there a way to input HTML into a text area, then upon submission, have the system read the file, identify the class selector, and separate the HTML into multiple files saved in a directory? If you have any thoughts on how this could be accomplished, pl ...

javascriptphpjqueryhtmlforms

In Internet Explorer 10, it is not possible to access the document.links using the link's id; it can only be accessed using the

Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...

javascripthtml

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

phphtmlrss

The issue with the page not appearing correctly on IE9 is currently being resolved

I am utilizing bootstrap alongside a bootswatch theme and HTML5 boilerplate to design a webpage. While it appears correctly on Chrome and Firefox, the display is off on IE9 and IE8 mode. However, everything works fine when compatibility mode is enabled in ...

csshtmltwitter-bootstrapinternet-explorer-9bootswatch

"Enhancing Your Website with Dynamic CSS3 Div Animations

Seeking assistance in displaying an empty div after a CSS3 Animations loading circle has completed. Any guidance is welcome! jsFiddle ...

htmlcss