```css
/* CSS Document */

.my-bg{
 background-color:#DD792E;
}

.bottom-0{
 bottom: 0px;
}

.border-right-curved{
 /*border-bottom-right-radius: 50px;
 border-top-right-radius: 50px;*/
 height:50px;
 text-align:center;
}

.main-heading{
 color:white;
 font-size:24px;
 font-weight:bold;
}

.width-95{
 width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
```

```html
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>معرفة</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>

<body background="images/background.png">
<div id="container>"

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>
</html>
```

I have 2 divs. 1st is col-sm-11 and second is col-sm-1. 1st divs have text and 2nd div has image inside it. I want to join the content of 2 divs.

My current output is like this.

[![enter image description here](https://i.stack.imgur.com/4T5i8.png)](https://i.stack.imgur.com/4T5i8.png)

I want my output to be like this.

[![enter image description here](https://i.stack.imgur.com/swdik.png)](https://i.stack.imgur.com/swdik.png)

This is my code.

**HTML**

```
<body background="images/background.png">
<div id="container>"

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="my-bg border-right-curved col-xs-11 col-sm-11 col-md-11">
    <div style="height: 50px" class="main-heading">
      <div id="mytext">مرحبا بك في تطبيق معرفة</div>
    </div>
  </div>
  <div class=" col-xs-1 col-sm-1 col-md-1"> <img src="images/info.png" height="50px" width="50px" class="pull-left" /></div>
</div>
<div class="col-sm-12"><br />
</div>
<footer id="footer" class="col-sm-12 my-bg bottom-0"> asdasd </footer>
</body>
</body>

```

And my **CSS**

```
.my-bg{
    background-color:#DD792E;
}

.bottom-0{
    bottom: 0px;
}

.border-right-curved{
    /*border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;*/
    height:50px;
    text-align:center;
}

.main-heading{
    color:white;
    font-size:24px;
    font-weight:bold;
}

.width-95{
    width:95%;
}

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

```

Also I want my FOOTER to fixed at bottom. I am using bootstrap. Any help will be much appreciated. Thank-you!