Two columns with different background in container

Question

Two columns with different background in container

481 Views Asked by Hans Felix Ramos At 04 April 2025 at 22:36

I have an issue with a specific layout with bulma container. I want to show a layout with two columns inside a container, left background part must be gray and right white. I need to wrap columns inside container for size and breakpoints.

.container{
  min-height: 100vh
}

.left{
  background-color: lightgray;  
  min-height: 100vh
}

.right{
  background-color: white; 
  min-height: 100vh
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<nav class="navbar has-background-grey-dark">
  <div class="container">
<div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
  </a>
</div>
<div class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
      Home
    </a>
  </div>

  <div class="navbar-end">
    <div class="navbar-item">
      <div class="buttons">
        <a class="button is-primary">
          <strong>Sign up</strong>
        </a>
      </div>
    </div>
  </div>
</div>
  </div>
</nav>

<div class="container">
  <div class="columns">
<div class="column is-9 left">
  Left
</div>
<div class="column">
  Right
</div>
  </div>
</div>

You can see I work here: https://codepen.io/hans-felix/pen/GRqKeYe

Current result:

Expected result:

I use containers to align items as you can see.
How Can I hanlde this design?

Original Q&A

There are 2 best solutions below

**mbmarketing4you** · Answer 1

Try this:

    .navbar {
  padding-left: 70px;
  padding-right: 70px;
}

.row {
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
 
 .column1 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  background-color:lightgrey;
  padding-left:80px;
}

 .column2 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding-right:80px;
  padding-left:10px;
}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<nav class="navbar has-background-grey-dark"> 
<div class="navbar-brand">
  <a class="navbar-item" href="https://bulma.io">
    <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28">
  </a>
</div>
<div class="navbar-menu">
  <div class="navbar-start">
    <a class="navbar-item">
      Home
    </a>
  </div>

  <div class="navbar-end">
    <div class="navbar-item">
      <div class="buttons">
        <a class="button is-primary">
          <strong>Sign up</strong>
        </a>
      </div>
    </div>
  </div>
</div>
</nav>

<body>
 <div class="row">
<div class="column1">
  Left
</div>
<div class="column2">
  Right
</div>
  </div>
</body>

When you inspect your result, you can look and see that the margin is what is making the white space off to the left side. If you set the margin to zero, it should pull it over. The nav bar should be in its own container that isn't affected by any other containers on the page.

**JPortillo** · Answer 2

Flex should help with this. https://developer.mozilla.org/en-US/docs/Web/CSS/flex Maybe you don't even need the "container" DIV.

.columns {
  display: flex;
  width: 100%;
}

.column {
  flex: 1;
}

.left {
  background-color: lightgray;
  min-height: 100vh;
}

.right {
  background-color: white;
  min-height: 100vh;
  flex: unset;
  width: 100px;
}

<div>
  <div>Your header stuff here ... ... ... ... ... ... ... ... ... ... .. .... .. .. . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  </div>
  <div class="columns">
    <div class="column is-9 left">
      Left
    </div>
    <div class="column right">
      Right
    </div>
  </div>
</div>

Two columns with different background in container

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in BULMA

Trending Questions

Popular # Hahtags

Popular Questions