CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wawanopoulos
wawanopoulos

Reputation: 9804

Width of div taking all remaining width

I am trying to put a top bar on the right of my left menu. I put width: 100% of my #top_bar but there is so big. I would like that my top bar take only the remaining space of the screen.

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

Upvotes: 4

Views: 77

Answers (5)

sergdenisov
sergdenisov

Reputation: 8572

Maybe this? You could only change width: 100% to right: 0. Also float: left is unnecessary.

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>

Upvotes: 0

WebWorker
WebWorker

Reputation: 413

Try to use a 100% width container around your elements.

<div class="container">

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

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

</div>

See this pen I just created: http://codepen.io/anon/pen/MwodLx

Upvotes: 0

NeoWang
NeoWang

Reputation: 18583

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

Upvotes: 1

TheWebDesignerPro
TheWebDesignerPro

Reputation: 91

Just add this to your css:

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

Upvotes: 0

Mitul
Mitul

Reputation: 3437

You can use the margin left for the 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>

Working Demo

Upvotes: 0

Related Questions