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
Why Do Symbols Like Apostrophes and Hyphens Get Replaced with Black Diamonds on My Website
Create Download Link for Music or Video
Cascading Style Sheets Use "Id" or "Class"
Delete HTML Tags in Sed or Similar
CSS Flex Box Last Space Removed
Svg Foreignobject Contents Do Not Display Unless Plain Text
Center Text Vertically Within <Div>
CSS Drop Down Menu Hover Effect
How to Style and Align Forms Without Tables
How to Export Part of an HTML Page to an Svg Image
Website Response Time: Difference Between 'Load' and 'Finish'
How to Center a Navigation Bar with CSS or HTML
How to Conditionally Display Element Attributes Using Angular2
Using Cm/Mm on The CSS of a Web App That Replicates Paper Interaction Is a Good Practice
How to Style a Horizontal List with Bullets Between Items Using CSS
HTML 5 Input Type="Number" Element for Floating Point Numbers on Chrome