1

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/bulma@0.9.1/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?

5
  • 1
    Sorry but I don't get what is breaking ? The fact that it is breaking under 769px is not fiting you ?
    – MaxiGui
    Oct 6 '20 at 16:53
  • maybe you also need to call vegeta container to solve problem
    – German
    Oct 6 '20 at 16:55
  • On desktop, all outside container is white, I need to get it as expected result Oct 6 '20 at 17:04
  • 1
    I add a current result image @MaxiGui Oct 6 '20 at 17:05
  • Vegeta container @Rehan Oct 6 '20 at 17:06

2 Answers 2

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/bulma@0.9.1/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.

4
  • thanks, but I want to mantain the margins inside container because I have other elements and I need them to be aligned. Oct 6 '20 at 17:22
  • so you just want the grey to extend to the left further? Oct 6 '20 at 17:24
  • I update mi question, I added a header. I want to mantain alignment in bulma logo and left text. Oct 6 '20 at 17:51
  • @HansFelixRamos I updated my code above to reflect the changes Oct 6 '20 at 18:23
1

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>
6
  • Yes, I think maybe dont need a container. But I use to align items inside it. I update mi question and I added a header Oct 6 '20 at 17:52
  • So, the Right column needs to be of a certain width, and the left column needs to take the remainder of the space?
    – JPortillo
    Oct 6 '20 at 18:06
  • Yes, in this case,container has an exactyl witdh depends on breakpoints Oct 6 '20 at 18:07
  • 1
    Check updated response then. I think this should do.
    – JPortillo
    Oct 6 '20 at 18:09
  • Ok, I think flex hlep to hanlde columns, but i need to left text and bulma logo be aligned, see my expected result image. Oct 6 '20 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged html css bulma or ask your own question.