In CSS, How to Get a Left-Side Fixed-Width Column with a Right-Side Table That Uses The Rest of The Width

In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?

<div style="width: 200px;background-color: #FFFFCC; float: left;">
Left column
</div>

<div style="margin-left: 200px; background-color: #CCFFFF">
Right column
</div>

That should do it (obviously implementation will vary based on where it is in the page, but I think that's the concept you're looking for).

Align a DIV to the right of a fixed width left bar

The correct solution is here:

In CSS, how do I get a left-side fixed-width column with a right-side table that uses the rest of the width?

Grid inside flex with fixed-width left and right sidebars

You could just add a 200px padding on the left and right to your grid, so it is between the sidebars.

#container{ display: flex;}
#left-sidebar{ background-color: blue; height: 100%; width: 200px; position: fixed; left: 0;}
#grid{ padding-left: 200px !important;padding-right: 200px !important; display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(12, 1fr); grid-gap: 10px; height: 100vh; padding: 10px; flex: 1;}
#right-sidebar{ background-color: blue; height: 100%; width: 200px; position: fixed; right: 0;}
#g1{ background-color: orange; grid-column: 1 / 4; grid-row: 1 / last-line; border-radius: 4px;}
#g2{ background-color: red; grid-column: 4 / 13; grid-row: 1 / last-line; border-radius: 4px;}
<div id="container">
<div id="left-sidebar"></div> <div id="grid"> <div id="g1"></div> <div id="g2"></div> </div> <div id="right-sidebar"></div> </div>

Create 3 columns in HTML – left and right fixed width and middle elastic

I've created two simple examples. First one does not use flex as long as you don't want to use it.

Example using calc()

.container > div {   float: left;}.left {   width: 100px;   background-color: pink;}.middle {   width: calc(100% - 200px);   background-color: blue;}.right {   width: 100px;   background-color: yellow;}
<h1>No flex</h1><div class="container">    <div class="left">Left</div>    <div class="middle">Middle</div>    <div class="right">Right</div></div>

2 column div layout: right column with fixed width, left fluid

Remove the float on the left column.

At the HTML code, the right column needs to come before the left one.

If the right has a float (and a width), and if the left column doesn't have a width and no float, it will be flexible :)

Also apply an overflow: hidden and some height (can be auto) to the outer div, so that it surrounds both inner divs.

Finally, at the left column, add a width: auto and overflow: hidden, this makes the left column independent from the right one (for example, if you resized the browser window, and the right column touched the left one, without these properties, the left column would run arround the right one, with this properties it remains in its space).

Example HTML:

<div class="container">
<div class="right">
right content fixed width
</div>
<div class="left">
left content flexible width
</div>
</div>

CSS:

.container {
height: auto;
overflow: hidden;
}

.right {
width: 180px;
float: right;
background: #aafed6;
}

.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}​​

Example here: http://jsfiddle.net/jackJoe/fxWg7/

CSS: Two fields, left one flexible width, right one takes up remaining space

For the right box use overflow: hidden; width: auto; instead of floating. That should take the remaining space without dropping below no matter how much content there is. Continue floating the left box.

bootstrap row with fixed width columns on left and right sides

https://stackoverflow.com/a/29532261/2193381 offers a very simple solution that appears to work. It is not the approach I had in mind, and may have unintended effects, but is interesting nonetheless.

In short, pull-left and pull-right the fixed width divs before the central floating width div is set.

How to set up fixed width for td?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
<th style="width: 16.66%">Col 1</th>
<th style="width: 25%">Col 2</th>
<th style="width: 50%">Col 4</th>
<th style="width: 8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.



Related Topics



Leave a reply



Submit