CODEWITHSUNDEEP
htmlcss
patrickS
patrickS

Reputation: 3760

Two div elements should stay in one row

I have a html page with 2 divs and they should resize, but always stay in one row. How can I build this?

I have the following example html code:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</body>
</html>

And the style sheet looks like this:

#content {
  width: 100%;
}

#table {
  width: 100%;
  background-color: red;
  display: inline-block;
}

#sidebar {
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}

Upvotes: 0

Views: 184

Answers (5)

Marc Audet
Marc Audet

Reputation: 46825

Using floats and the calc() function

Here is one way of doing it using floats and the calc() function (CSS3):

#content {
  width: 100%;
  border: 1px dotted gray;
  overflow: auto; /* useful for enclosing the floated region */
}
#table {
  float: left;
  width: calc(100% - 170px); /* modern but not yet widely supported */
  background-color: red;
}
#table table {
  border: 1px solid yellow;
  width: 100%; /* '100%' for full-width; 'auto' for shrink-to-fit content */
}
#sidebar {
  float: right;
  width: 170px;
  background-color: blue;
}

Float your #table and #sidebar to the left and right respectively.

When you float an element, its with will compute to a shrink-to-fit value unless you specify a width value.

If you specify width: 100% on #table, this will force the sidebar to start on a new line.

To allow space for the sidebar, use calc(100% - 170px) to computer the ideal maximum width for the table panel.

The calc() function is supported by the latest browsers, so this solution may not be suitable.

See Demo Fiddle

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Change your content css to 

#content {
width: 100%;
display:inline-block;
}

but here as your table width is set to 100% how the main div will accept 170px in the same line.

after #table goes beyond 81% it pushes the content to next line

Upvotes: 1

Ruddy
Ruddy

Reputation: 9923

Float:left;

for both divs and then put them in a wrap and then size the wrap to however you want it to look.

.wrap {

 width: 500px;
 height:800px;
}

So for your code, CSS:

#content {
  width: 100%;
}
#wrap {
  height: 100%;
  width: 100%;
}
#table {
  width: 60%;
  background-color: red;
  display: inline-block;
  float: left;
}
#sidebar {
 width: 170px;
 background-color: blue;
 float: right;
 display: inline-block;
 float: left;
}

HTML: 

<body>
<div id="wrap">
<div id="content">
  <div id="table">
  <table>
    <tr>
      <td>ONE</td>
      <td>TWO</td>
    </tr>
  </table>
  </div>
  <div id="sidebar">
    <p>This is a sidebar</p>
  </div>
</div>
</div>
</body>

Upvotes: 0

Nikhil N
Nikhil N

Reputation: 4577

Check out this fiddle...It helps to achieve what you need.

Here's updated css..

#content {
  width: 100%;
}

#table {
    float: left;
  background-color: red;
  display: inline-block;
    width: 60%;
}

#sidebar {
    float: left;
  width: 170px;
  background-color: blue;
  float: right;
  display: inline-block;
}

Upvotes: 0

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

You are giving #content width of 100% so it will take whole space. You will need to adjust both div's width and float #content to left so that it calculates to 100%.

Upvotes: 0

Related Questions