#main {
margin: auto;
padding: 0;
width: 95%;
}
#left-wrapper {
display: block;
}
#content {
height: 500px;
white-space: nowrap;
overflow-y: auto;
overflow-x: scroll;
}
<div id="main">
<table>
<tr>
<td>
<div id='left-wrapper'>
</div>
</td>
<td>
<div id='content'>
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
The content wrapper contains a table which holds some data which size is unknown, and must not be wrapped so white-space:nowrap is set, and it works fine. The height of the content div has a fixed size and the vertical scrollbar appears ok. The main div's width is set to 95%. The problem is that the content div does not activates the scrollbar when the data is too long to fit, instead it resizes itself to the right side of the screen, even if the wrapper main div's width is set to 95%. Is there a way to activate the content div's horizontal scrollbar without setting it's width? It's maximum width should be in line with the width of the main wrapper, it would not be a problem even if it has a fixed width, but then it must fill the remaining area to be in line with it's wrapper main div which as I mentioned has it's width set to 95%.
I searched everywhere, days are passing and I simply can't figure out a right solution. Please if anyone has a suggestion I would appreciate it very much. Thanks.
The inner <div> will stay inside the container <div> with the CSS you have. But, because you have a <table> surrounding the inner <div> it doesn't behave as expected.
I think the solution may be to layout the page without the <table>.
This example shows the inner <div> being constrained inside the outer <div> using your current CSS.
<html>
<head>
<style>
#main {border:solid 2px orange; margin: auto; padding: 0; width: 190px;}
#left-wrapper {display: block;}
#content {border:solid 2px purple; height: 500px; white-space: nowrap; overflow-y: auto; overflow-x: scroll;}
</style>
</head>
<body>
<div id="main">
<div id='content'>
<table style="border:solid 1px #ddd;">
<tr style="background-color:#ccccff;">
<td>column A</td>
<td>column B</td>
<td>column C</td>
<td>column D</td>
<td>column E</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>2</td><td>3</td>
</tr>
<tr>
<td>11</td><td>12</td><td>11</td><td>12</td><td>13</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Related
In the code below, div with red background gets 0 height when the image is there but with image node removed, it gets the correct height of 60px from the parent. Why is it and how can it be corrected?
Here is also the jsfiddle link: https://jsfiddle.net/zuymamq7/
html,body{
width:100%;
height:100%;
}
<table style="width:100%;height:100%;">
<tr style="height:60px;">
<td>
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;"></img>
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Biggest thing that I noticed as I began to edit this:
You added a close image tag (</img>). Those don't exist. The correct syntax is either <img src="something.jpg"> or more technically <img src="something.jpg" /> Threw off some things a lot (especially in the editor)
I'm thinking this is what you want, or at least, I hope.
html,
body {
width: 100%;
height: 100%;
}
<table style="width:100%;height:100%;">
<tr>
<td style="height:60px">
<div style="width:100%; height:100%; background-color:blue;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
<div style="display:inline-block;width: 10%; height:100%; background-color:red;">
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Other Way
If you can change up the HTML a bit, then this should work too.
html,
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
<table style="width:100%;height:100%;">
<tr style="background-color:blue">
<td style="height:60px;width:60px;">
<img src="http://www.bensound.com/bensound-img/betterdays.jpg" style="width:60px; height:60px;" />
</td>
<td style="background-color:red; width:10%">
Text
</td>
<td> </td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
How do I make a table that flexes between a min and max width, whilst 2 columns always stay the same width and a textbox in the third fills the available space.
It is almost working here. But the width on the fixed columns is being ignored when the table is small.
<table>
<thead>
<tr>
<td class="col1">
Column 1
</td>
<td class="col2">
Column 2
</td>
<td class="col3">
Column 3
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">
<input type="text" />
</td>
<td class="col2">
fixed content
</td>
<td class="col3">
fixed content
</td>
</tr>
</tbody>
</table>
.col1 {
max-width: 25em;
min-width: 20em;
}
.col2, .col3 {
width: 10em;
}
input {
width: 100%
}
fiddle
I'm not sure whether this is exactly what you wanted, but you need to make the table take 100% width, so it will grow on resize and the flexible first column with it. Unfortunately, max-width seems not to do anything here.
JSFiddle
I have divs as shown in the FIDDLE , the div content gets overlapped with the header resulting in hiding of the content data ie "Sample data 1".
<div id="header">
<div id="firstdiv">
<table border="0px" width="100%" style="background-color:rgb(2, 44, 72)">
<tr>
<td id="test1" style="width:90%;" align="left">test
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<table border="0">
<tr>
<td>Sample data 1
</td>
</tr>
<tr>
<td>Sample data 2
</td>
</tr>
<tr>
<td>Sample data 3
</td>
</tr>
<tr>
<td>Sample data 4
</td>
</tr>
</table>
</div>
//CSS
#header
{
position:relative;
}
#firstdiv
{
float:left;width:100%;
position:absolute;
color:white;
}
Thanks
Remove the absolute positioning from the #firstdiv element. The left float also seems unnecessary.
See here: http://jsfiddle.net/k8Vut/2/
Add some padding to header: http://jsfiddle.net/k8Vut/3/
#header
{
padding-top: 25px;
}
Since your firstdiv is absolute it'll start from top: 0 position and hence overwrites the relative positioned header. So if you add some padding, it'll move the header a little below and make space for firstdiv
How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/
I am trying to achieve an effect in HTML + CSS like this
_____________________[ Some Div ]
The ____ is a border-bottom. The Div to the right of it shouldn't have the border. I want this border to stretch as much as possible, so that together they occupy the width of the parent. I am trying to avoid any fixed spacing layout.
I tried using a table with width:100%:
<table style="width:100%"><tbody><tr>
<td id="borderDiv"></td>
<td id="contentDiv">Some Div</td>
</tr><?tbody></table>
The extra space goes to the second td instead of the first one. I also tried floating the content div to the right:
<div>
<div id="contentDiv" style="float:right">Some Div</div>
<div id="borderDiv"></div>
</div>
But the div with the border now fills up the entire space of the parent. Couldn't figure out a way to constraint it to the leftover space.
Maybe I'm misunderstanding your question and I know the HTML + CSS purists are going to hate me for this but can't you do the following:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td><nobr>my content</nobr></td>
</tr>
</table>
If the second column has a specific width that you want you can specify that and remove the <nobr> tags and end up with something like:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="width: 200px">my content</td>
</tr>
</table>
The purist alternative to Brian's solution, using CSS properties:
<table style="width: 100%">
<tr>
<td style="border-bottom: 1px solid #000; width: 100%"> </td>
<td style="white-space:nowrap">my content</td>
</tr>
</table>
<div>
<div id="contentDiv" style="float:right; width:30%">Some Div</div>
<div id="borderDiv" style="margin-right: 30%"></div>
</div>
Floats are required to have a width so that's how I'd approach it.
This might work, but need more info about how you are dealing with the height. If it's fixed for example just make the float a bit taller.
<div>
<div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
<div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>