0

I try to add width:100% to div tag which is inside bootstrap grid system (col-lg-3). But div takes the whole browser width. It doesn't take 100% width of parent(col-lg-3).

.sidebar {

    color: #fff;
    font-weight: bold;
    font-size: 18px;
     background-color: green; 
}

.wrapping {
    width: 100%;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}
<div class="row">
        <div class="sidebar col-lg-3">
            <div class="wrapping">
                <a href="javascript:void(0)" class="close_menu">Close Menu</a>
                <div>
                    <h3>Company</br>Name</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Showcase</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Designers</a></li>
                        <li><a href="#">Packages</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main col-lg-9"></div>
        </div>
Kazu25
  • 87
  • 1
  • 2
  • 13

2 Answers2

1

Are you trying to set 100% width to your .wrapping div? This will take the width of browser window, becouse its position fixed. try adding this to the .sidebar:

position: relative;

this will make the wrapping to take the width of the sidebar.

Edit: Try using position sticky instead of position fixed. This way the wrapping will respect the width of its parent. I created a fiddle for that: jsfiddle.net/Lj8dqnwe

Jonathan Distenfeld
  • 69
  • 3
  • But I want this sidebar fixed on the left side of browser. Also, why I can't set the width to position fixed? – Kazu25 Apr 26 '19 at 10:34
  • What do you mean by "set the width to position fixed"? You can't set the width to position fixed. Position fixed will always be relative to the viewport. If you wan't it to be relative to the parent, you'll have to give that parent position relative. See more here: https://www.w3schools.com/css/css_positioning.asp – Jonathan Distenfeld Apr 26 '19 at 10:43
  • I mean this sidebar need to be fixed on the left side of browser. So I need to use "position:fixed" and How can I set the width of .wrapping div relative to parent(.sidebar) width – Kazu25 Apr 26 '19 at 11:09
  • Alright, i think i understand your problem now. Try using position sticky instead of position fixed. This way the wrapping will respect the width of its parent. I created a fiddle for that: https://jsfiddle.net/Lj8dqnwe/ – Jonathan Distenfeld Apr 26 '19 at 12:02
-1

you can set the width to auto So it takes the width of the parent tag

.wrapping {
    width: auto;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}
glory kingzman
  • 1
  • 1