0

How can I make #content sit next to #menu while occupying the rest of the width of #container;

<div id="container">

    <div id="menu">
    </div>

    <div id="content">
    </div>

</div>

Note: I need #menu to have fixed 200px width

https://jsfiddle.net/h5z8yowL/1/

IMB
  • 15,163
  • 19
  • 82
  • 140

4 Answers4

2

You could use flex:

#container {
  display: flex;
  width: 100%;
}

#menu {
  width: 200px;
  background: red;
}

#content {
  flex: 1;
  background: yellow;
}
<div id="container">

  <div id="menu">
    foo
  </div>

  <div id="content">
    foo
  </div>

</div>

Or grid layout

#container {
  display: inline-grid;
  grid-template-columns: 200px auto;
  width: 100%;
}

#menu { background: red; }
#content { background: yellow; }
<div id="container">

  <div id="menu">
    foo
  </div>

  <div id="content">
    foo
  </div>

</div>
baao
  • 71,625
  • 17
  • 143
  • 203
1

You can use calc() function in css.

#container { width:100%; }
#menu { background:red; float:left; width:200px; }
#content { background:yellow; float:left; width:calc(100% - 200px) }
<div id="container">

 <div id="menu">
    foo
 </div>
 
 <div id="content">
    foo
 </div>

</div>
Pierre Myx
  • 35
  • 1
  • 2
  • 8
0

You can add CSS to both of the divs, which is the float property. 

#menu{
float: left;
width: 200px;
}
#context{
float: right;
}
0

I'm not shure whether I understood what you ment:
You want the div #menu to be the exact size of 200px, no matter what's inside?
Solution:
you need to do this in css:
There ar mainly 3 different types of including css

1.inside the body Tag: (used for small Websites with nothing looking the same, most programers hate if you do this)

<div id="container">

    <div id="menu" style="width: 200px;">
    </div>

    <div id="content">
    </div>

</div>

2.inside the head Tag: (used for small websites with things looking the same, most programers do this for small websites)

<head>
  <style>
    .menu{
       width:200px;
    }
  </style>
</head>    
<body>
    <div id="container">

        <div class="menu" id="menu">
        </div>

        <div id="content">
        </div>

    </div>
</body>

3.inside a .css file: (used for large Websites with unified look)
HTML:

<head>
  <link rel="stylesheet" type="text/css" href="maincss.css">
</head>    
<body>
    <div id="container">

        <div class="menu" id="menu">
        </div>

        <div id="content">
        </div>

    </div>
</body>

CSS:

   .menu{
       width:200px;
    }
Tim T.
  • 376
  • 2
  • 10
  • @IMB wanted to know how to fill the remaining space with the `#content` div. The menu is already set to 200px width. – Maytha8 Oct 13 '18 at 12:57
  • @Mth Okay, thanks. In his question he wrote that he needs the menu to be 200px, so I got that as his problem – Tim T. Oct 13 '18 at 13:02