CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
FlyingCat
FlyingCat

Reputation: 14290

How to set margin for elements in my case

I am trying to create a response view for my app.

Currently I have two column

The left one should be flexible depending on the browser width and the right one has set width of 120px.

html

<div class="wrapper row">
    <div class="left col-xs-9">
        This is the left column
    </div>
     <div class="right col-xs-3">
         Right column
     </div>
</div>

CSS 

.wrapper {
    background-color: blue;
    color: #fff;
}
.left {
    margin-right:20px;
    background-color: red;
}
.right {
    width: 120px;
    background-color: green;
}

The problem is I need to have 20px margin between these two columns no matter what browser width is while the right one maintain 120px width. How do I do this? Thanks.

http://jsfiddle.net/4ufk1xxc/2/

Upvotes: 0

Views: 26

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

Changing the wrapper to a flexbox solves the problem:

.wrapper {
  display: flex;
}

Updated Fiddle

Upvotes: 1

Related Questions