Two div in one line, but one div is fixed size, how to?

Question

I'm sorry, I speak a little English. I would like see in one line the left and right div.

HTML:

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
 <div id="right"></div>
</div>
<div id="footer">footer</div>

CSS:

#container { max-width: 1700px; }
 #left { width: 100%-314px; }
 #right { width: 314px; }

And I would like work if without #right div. See:

HTML (2):

<div id="header">header</div>
<div id="container">
 <div id="left"></div>
</div>
<div id="footer">footer</div>

How to?

Answer 1

This should work for you!

#container {
 max-width: 1700px;
 display: flex;
 }
 #left {
 width: calc(100% - 314px);
 }
 #right {
 width: 314px;
 }

Code Explained:

display:flex : The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.

calc(100%-314px) : The calc() function performs a calculation that can be used on the property.

I hope this helped you!

Answer 2

A possible workaround might be using the span tag, used in your code like this:

<div id="header">header</div>
<div id="container">
 <span id="left"></span>
 <span id="right"></span>
</div>
<div id="footer">footer</div>

that wont require a fixed size or anything.

Answer 3

Do you mean something like this?

I simply select the divs inside the container and gives them display: inline-block

#container { max-width: 1700px; }
#left { width: 100%-314px; }
#right { width: 314px; }
#container div {
     display: inline-block;
 }

<div id="header">header</div>
<div id="container">
   <div id="left"><p>|left elem|</p></div>
   <div id="right"><p>|right elem|</p></div>
</div>
<div id="footer">footer</div>

Answer 4

You can use flexbox, make sure you set display:flex for your container and if you want to align your items with space in between, you can set justify-content:space-between.

#container {
  display: flex;
  max-width: 1700px;
  justify-content: space-between;
}

#left {
  background-color: green;
  width: 314px;
}

#right {
  background-color: red;
  width: 314px;
}

<div id="header">header</div>
<div id="container">
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>

Answer 5

How about css grid?

.container {
  display: grid;
  grid-template-columns: 1fr auto;
}

.right {
  width: 314px;
}

<div class="container">
  <div class="left">A</div>
  <div class="right">B</div>
</div>

Answer 6

You can do this by CSS flex property. div is block level element to get div in one line you can set div to display:inline-block; or inline check example below.

.flex-container {
            display: flex;
            height:400px;
            flex-flow: column wrap;
            background-color: green;
            align-content: space-between;
        }
          
        .flex-container > div {
            background-color: #fff;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
.container{
border:1px solid #000;
height:500px !important;
padding:20px;
}

.left{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:left;
}

.right{
margin:10px;
background:#f00;
padding:50px;
color:#fff;
float:right;
}

<h1>Example 1</h1>
<div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div> 
        <div>8</div> 
</div>

<h1>Example 2</h1>
<div class="container">
  <div class="left">
    <h3>Left</h3>
  </div>

  <div class="right">
    <h3>Right</h3>
  </div>
  
  <div class="left">
    <h3>Left</h3>
  </div>

  <div class="right">
    <h3>Right</h3>
  </div>
  
</div>