Geek Answers Handbook

The width of the div taking up the remaining width

I am trying to put the top bar to the right of my left menu. I put width: 100%out mine #top_bar, but there were so many. I would like my top panel to occupy only the remaining screen space.

HTML:

<body>    
    <div id="menu_left"></div>
    <div id="top_bar"></div>      
</body>

CSS

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    float: left;
    width: 200px;
}

#top_bar {
    border-bottom: 1px solid #EFF0F3;
    position: absolute;
    background-color: white;
    left: 200px;
    height: 70px;
    width: 100%;
}

Result: enter image description here

+4
source share
5 answers
#top_bar {
    border-bottom: 1px solid #EFF0F3;
    position: absolute;
    background-color: white;
    top: 0px;
    left: 200px;
    right: 0px;
    height: 70px;
}
+1
source

You can use the box on the left for a large div

CSS:

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    float: left;
    width: 200px;
} 
#top_bar {
    border-bottom: 1px solid #EFF0F3;
    background-color: red;
    margin-left: 200px;
    height: 70px;
}

HTML:

<body>
    <div id="menu_left"></div>
    <div id="top_bar"></div>
</body>

Job Demo

0
source

css:

body {
   margin: 0;
   width: 100%;
   overflow: hidden; 
}
0

this? width: 100% right: 0. float: left .

html, body {
    width: 100%;
    height: 100%;
    margin: 0;    
}

#menu_left {
    background-color: #354052;
    position: fixed;
    height: 100%;
    width: 200px;
}

#top_bar {
    border-bottom: 1px solid #EFF0F3;
    position: absolute;
    background-color: white;
    left: 200px;
    right: 0;
    height: 70px;
}
<div id="menu_left"></div>
<div id="top_bar"></div>
Hide result
0

100% .

<div class="container">

    <div id="menu_left">
    </div>

    <div id="top_bar">
       NAVIGATION
    </div>

</div>

, : http://codepen.io/anon/pen/MwodLx

0

More articles:


All Articles