I have been trying to figure out how to create this layout, I have a 2 column layout with the left column having 1 row and the right side having 2. Im trying to get it to adjust fluidly. What im having trouble with is I would like the top of the top image on the right to align with the top of the left image while the bottom of the bottom image stays aligned with the bottom of the left image. Should I use a table?
here is what I have so far.. not very close I really appreciate the help.
http://jsfiddle.net/#&togetherjs=TpsEptHKit
here is an image of what I would like to acomplish
The closest I could come up with was a table with a single row and two cells (so both sides would be equal in height).
Then on the right we have two divs with heights adding up to 100% (say, 60% for the top and 40% for the bottom).
We'll specify vertical-align: top for the upper block, and vertical-align: bottom for the lower one. On top this will produce the desired effect, but on the bottom the vertical align doesn't kick in properly because we only have one element to align. To fix this, we need a spanner element with 100% height and place this adjacent to the "real" block.
Here, .block would represent the content inside the cell, e.g. image and caption.
JSFiddle
HTML
<table class="container">
<tr>
<td class="left">
</td>
<td class="right">
<div class="top">
<div class="block"></div>
</div>
<div class="bottom">
<div class="filler"></div><div class="block"></div>
</div>
</td>
</tr>
</table>
CSS
.container {
width: 100%;
height: 100%;
}
.left {
width: 60%;
height: 200px;
}
.right {
height: 100%;
}
.right .top {
height: 60%;
width: 100%;
vertical-align: top;
}
.right .bottom {
height: 40%;
width: 100%;
vertical-align: bottom;
}
.block {
display: inline-block;
}
.filler {
height: 100%;
display: inline-block;
}
What you can do is first wrap the whole thing in a container, than give your .right:{float:right} and remove the float:left in other classes. See the code
.container{
width: 620px;
height: 400px;
}
.right {
float: right;
}
.blackBox {
background-color: black;
width: 200px;
height: 175px;
}
.redBox {
background-color: red;
width: 400px;
height: 400px;
}
This looks the same as your pic: http://jsfiddle.net/aC7j6/1/
Here's the fiddle: http://jsfiddle.net/RGaw5/
<div id="left-container">
<div id="left" class="black"></div>
<p class="description-text-left">Printed Lexington</p>
</div>
<div id="right">
<div id="right-top" class="black"></div>
<p class="description-text">Printed Lexington</p>
<div id="right-bottom" class="black"></div>
<p class="description-text">Printed Lexington</p>
</div>
You can make it responsive by giving the width in vw or %.
EDIT: Here's a responsive, updated fiddle: http://jsfiddle.net/RGaw5/1/
EDIT 2: Note that the first column's height can vary - no matter what's the height, the rest of the divs will scale accordingly. Here's one more fiddle with a different left column's height: http://jsfiddle.net/RGaw5/2/
Using Twitter Bootstrap, I'm trying to create a horizontally scrolling series of thumbnails which allows for a scrollbar within the row that the thumbnails are displayed in, like so:
This gets me most of the way there, using this HTML:
<div class="row">Hello there</div>
<div class="row" style="overflow-x:scroll">
<table>
<tr>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
<td>
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</td>
</tr>
</table>
</div>
JSFiddle: http://jsfiddle.net/54fgv/2/
The overflow CSS property works great, giving me the scrollbar for the container div.
The thumbnail div elements are going to be a fixed size, which is more than likely going to be smaller than the image. In this case, the image is constrained to fit accordingly. As you can see though, when the image is wider than the thumbnail, the width is set to the thumbnail and the height is scaled accordingly. This is the behavior that I want, but I'd like to have the image vertically centered in the thumbnail.
I've tried adding vertical-align: middle to the thumbnail div elements, but to no avail.
How can I get the image to be centered vertically within the thumbnail?
Approach 1 - (example):
Wrap the img elements:
<div class="thumbnail" style="width: 400px; height: 400px">
<div class="thumbnail_wrapper">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
</div>
</div>
Change the display of the .thumbnail element to table. Use border-collapse: separate to fix padding/spacing issues. Change the display of the wrapper to table-cell and then add vertical-align: middle. Finally, give the img elements a width of 100%.
Example Here
.thumbnail {
display:table;
border-spacing: 2px;
border-collapse: separate;
border-radius:10px; /* Demonstrational.. */
}
.thumbnail_wrapper {
display:table-cell;
vertical-align:middle;
}
.thumbnail_wrapper > img {
width:100%;
}
Approach 2 - (example):
The flexbox approach doesn't require the wrapper element, however it has slightly less support than the table/table-cell approach.
<div class="thumbnail" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>
Basically, just change the display of the .thumbnail element to flex and then add align-items: center. All the other vendor prefixes are added for cross browser support. Read more about flexbox layouts and properties here - (mdn).
Example Here
.thumbnail {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
As a side note, you can avoid having to use HTML tables - example here.
HTML:
<div class="thumbnail v_align_all" style="width: 400px; height: 400px">
<img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
<span class="v_align_fix"></span>
</div>
CSS:
.v_align_all { white-space: nowrap }
.v_align_all > * {
vertical-align: middle;
display: inline-block !important;
}
.v_align_fix {
height: 100%;
vertical-align: middle;
display: inline-block;
width: 0px;
white-space: nowrap;
}
I've been on this for days and read every conceivable article on css, overflow, and layout.
I have a page with a banner (position: absolute), below which is a div containing two block divs. The second block div, in turn has another div containing text.
I would like the inner-most DIV display a scroll bar when the window is resized.
I've read the posting on ensuring height is set on all containing elements, I've set overflow-y: auto in all the right places. Just doesn't work.
The containing DIV looks like this: http://i.imgur.com/oDHM4.png
I want the green part to scroll when the browser window is resized (y-direction only).
Scrollable DIVs in any design are so useful... but shouldn't be this hard.
Any and all help appreciated.
Danny
MARKUP
The markup is very simple:
<body>
<div id="page-header" style='background:blue;'>page-header</div>
<div id="page-content">
<div id="configContent" style='height: inherit; background: steelblue;'>
<h1 id='panTitle'>Panel Title</h1>
<div id='panProbes' class='libPanel' style="background: maroon;">
<p>panProbes</p>
<div id="probesCT1" class="configtable" style='background: red;'>
<p class='pTblTitle'>probesCT1</p>
</div>
<div id="probesCT2" class="configtable" style='background: grey;'>
<p>probesCT2</p>
<div id='pTbl' style='background: green;'>
<div class='pRow'>1st para in pTbl</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some data</div>
<div class='pRow'>some more data</div>
<div class='pRow'>some more data</div>
</div>
</div>
</div>
</div>
</div>
</body>
** STYLING **
Here's the CSS cut down to the core essence:
html, body {
position:absolute;
margin: 0px;
padding: 0px;
height: 100%;
width: 1010px;
overflow: hidden;
}
#page-header {
position: absolute;
left: 5px;
top: 5px;
height: 60px;
width: 100%;
}
#page-content {
width: 100%;
height: 100%;
margin-top: 95px;
}
#configContent {
height: 100%;
width: 300px;
padding-left: 0px;
border-width: 3px;
margin-left: 30px;
margin-right: auto;
}
.libPanel { height: 100%; }
#probesCT1 { width: 150px; margin: 0 auto 0 30px; }
#probesCT2 {
width: 200px;
/* height: 100%; */
margin: 0 30px 50px 30px;
padding: 0 10px 10px 10px;
}
#pTbl { overflow-y: auto; }
.pRow { margin-bottom: 10px; }
For overflow-y: auto to work and make scroll bars, that div must have a specific height set. So in this example (with your html above) I set it to 200px, which was less space than necessary to display the content without a scroll bar, and thus shows a scroll bar. However, if set to 100% it does not work, because 1) you need to uncomment the height of the containing divs, and 2) your content in that div is less than needed to fill the height of the div, so no scroll bar shows up. With more content added, you get a scroll bar.
What I think you really want is to insure you always have a scroll bar if needed, but even then, you need to make sure the div does not extend below the bottom of the page or you could still have problems with the scroll bar itself going off the page. I've configured something that is probably more what your intent is, but note that I had to use multiple nested relative or absolute elements to achieve the effect. I also had to guess on some height positioning for the top of elements to clear your titles.
This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.
I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer, and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container, header, footer, and body sizing ok.
But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want this:
| - - - unknown width - - -|
+--------------------------+
| content |*|
| might |*|
| scroll |*|
+--------------------------+
I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).
What I have now is something like this:
<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
<div id="scrollContent" style="???">
</div>
</div>
I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.
Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.
The answer by Mattias Ottosson to another question offers a crucial piece of information - the vw units are based on the viewport width including the scrollbar, while percentages will be based on the available width which doesn't include the space taken up by the scrollbar. In other words, for an element taking up the full width of the page, the width of the scroll bar can represented as calc(100vw - 100%)
If we have a top-level element taking up 100% of the available width, then we can use this to control what changes size when the scrollbar becomes visible. Let's say our goal layout is something like this:
.app {
display: grid;
grid-template-columns: 1fr 50vh 1fr;
}
Where we want the middle column to be 50% as wide as the viewport height and the rest of the width divided between the left and right column. If we used that, then the addition of a scrollbar means that the horizontal space lost to the scrollbar (about 15px on chrome) is taken out of the width of the left and right columns equally. This can cause an ugly shift when a ui change causes the scrollbar to appear while the main content in the grid remains the same or similar. See the first snippet below.
We can use the calculated width of the scrollbar to instead only shrink the right column:
.app {
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
}
See the second snippet below. Unfortunately this means the fr units can't be used and the width of the columns must be specified a little more manually. In this case the width of the left column is half of the viewport width minus the 50vh taken up by the center column. The width of the right column is the space remaining from the available width (100% rather than 100vw) after subtracting the combined width of the left and center columns. This is clearer in the formula:
calc(100% - ((100vw - 50vh)/2) - (50vh))
which reduces to the one above
First snippet, ugly jump when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: 1fr 50vh 1fr;
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
second snippet, right column shrinks when scrollbar appears
$('button').click(() => {
$('.footer').toggle()
})
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
font-family: 'Archivo', sans-serif ;
}
.app {
margin: auto;
display: grid;
grid-template-columns: calc((100vw - 50vh)/2) 50vh calc(100% - (50vh + 100vw)/2);
text-align: center;
height: 100%;
width: calc(100% - 10px);
}
.left-column, .center-column, .right-column {
padding: 10px;
min-height: 50vh;
border: 1px solid black;
}
.left-column {
border-right: none;
background-color:#def;
}
.center-column {
background-color:#e1ebbd;
}
.right-column {
text-align: left;
border-left: none;
background: #fb1;
}
.footer {
grid-column: 1 / span 3;
height: 2000px;
background: #753;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="app">
<div class="left-column">
Left
</div>
<div class="center-column">
Center
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><br>
<button>Toggle footer</button>
</div>
<div class="right-column">
Right
</div>
<div class="footer">
</div>
</div>
</body>
</html>
The only way you can "get" and use the scrollbar-width with pure CSS is to actually have the scrollbar be there. Now, we don't want to force the scrollbar be visible all the time, so what we have to do is this:
Make a container for all of the website's content that always has the scrollbar shown, and hide it. It's surprisingly simple!
I've created a Fiddle. Here it is as a snippet:
/* The trick: */
html {
overflow-x: hidden;
}
body {
margin: 0;
width: 100vw;
}
body > * {
overflow-y: scroll;
margin-right: -100px;
padding-right: 100px;
}
/* Other styling: */
body {
font-family: sans-serif;
user-select: none;
--color: rgb(255 191 191);
}
header {
position: sticky;
top: 0;
z-index: 1;
--color: rgb(191 191 255);
}
body > * > div {
background-color: var(--color);
border: 3px solid;
margin: 10px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
}
label::before {
position: relative;
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin: 0 10px;
top: .2em;
border: 1px solid;
border-radius: .1em;
}
input:checked + label::before {
background-color: var(--color);
box-shadow: inset 0 0 0 1px #FFF;
}
input {
display: none;
}
input:not(:checked) ~ div {
display: none;
}
input ~ div {
height: 200vh;
}
<header>
<div>I am sticky!</div>
</header>
<main>
<div>Hello world!</div>
<input id="foo-2" type="checkbox" />
<label for="foo-2">Click me</label>
<div>Let's scroll</div>
</main>
The trick is giving the containing elements a negative margin and positive padding to the right. The offset used for these two properties can exceed the scrollbar-width, so making it 100px is plenty — I can't imagine any browser or website having scrollbars wider than 20px, let alone 100px.
By the way: The reason I'm applying these styles to every direct child of body, instead of having a single #container element, is because otherwise position: sticky wouldn't work. To have that feature work on an element, it can only have one anscestor with scrolling capabilities.
html contains #container contains sticky element -> does not work
html contains sticky container -> does work
Why not displaying always the scrollbars, even when there is no need to scroll?
You can achieve this by setting overflow:scroll; to the container.
Add another wrapper inside the element that will have the overflow:auto style and set it to about 18px narrower. The scrollbar should appear in that 18px gap.
I had a problem that is similar that I used the below solution for, I am not sure if this can be a solution to what you want to do, but it could be.
I had a div that resized to content automatically, and then the scroll was added, shrinking the inside, so that the table in it wrapped text, instead of making the container that much wider. The unwanted effect is seen in the below Old example, if the textarea is resized downward and the scroll appears.
My ugly solution was to add a div inside the overflow-y:auto-div, that had display:inline-block, and to add yet another small inline-block div after it, that was 19 pixels wide (reserved for scrollbar) and a pixel high. That little div would appear beside the real div when the browser resized the div to the content, and when the scrollbar appear, the small div is pushed down under the real div, and the real div keeps it's with. It will cause a one pixel bottom "margin", but hopefully not a problem. When no scrollbar ppears, there is 19 pixel of unused space beside the real div, as described in the Question.
(The outermost div is just there to replicate my setup/problem.)
Old:
<div style="display:inline-block">
<div style="max-height:120px; overflow-y:auto; border:1px solid gray">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
</div>
<br>
New:
<div style="display:inline-block">
<div style="max-height:150px;overflow-y:auto; border:1px solid gray">
<div style="display:inline-block">
<table border=1><tr>
<td>I do not</td><td>want this to</td>
<td>add breaks in the text.</td>
</tr></table>
<textarea rows=3 cols=15>Resize me down</textarea>
</div>
<div style="display:inline-block; width:19px; height:1px"></div>
</div>
</div>
<br>
I know that you want achieve this with CSS only, but I am giving a jQuery solution in case someone might find help.
Using jQuery, you can get the scrollbar size and then apply a margin to the container.
Something like this:
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
The above code snippet will add a margin if the height of all the content is greater than the container height.
We can also remove the horizontal scrollbar if it isn't needed:
body{
overflow-x:hidden;
}
You can do it with using this css on the content element: `calc(100% - 15px)`.
// calc(100% - the width we want to give on right hand side of content)
Please read below to check how will it work.
Definitely the most easy and less messy way to fix it using the overflow:scroll.
But if you do not want to show the scroll when it is not required then you should use the width in with respect to viewport (vw) instead of using 100%. As scrollbar comes in the viewport width, if we are aware about the width of scrollbar then we can accomplish our task using the below formula. Here i am setting the content width as viewport width minus the width of the scrollbar(let say 15px).
You need to provide width as: calc(100% - 15px). You can provide width in %, em etc.
The best would be if you override the width of scrollbar like below and then use that width value in your formula to subtract.
/* width */
::-webkit-scrollbar {
width: 10px;
}
#content {
width: calc(100% - 10px).
}
Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79. And this CSS only works in webkit browsers, so it might not work in IE.
So you can use 20px of maximim width to subtract becasue scrollbar can never take width more than 20px. Please find below the working code.
.scroll {
height: 100px;
overflow: auto;
border: 1px solid black;
width: 75%;
}
.zui-table {
width: calc(100% - 10px);
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<div class="scroll">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>
</div>
I had a similar scenario where I had a grid - heading row and actual data rows below it. The Data rows may be too much and get scrollbar, which will cause the cells in the rows to missalign from the cells in the heading row.
I solved this by using position:absolute on the right column in the rows, which contains a couple of buttons. Don't know if this will be applicable to your case, but it was perfect for mine.
Here is an example:
function toggleMoreRows() {
document.getElementById('grid-body').classList.toggle('more-rows');
}
body {
font-size: 13px;
font-family: Arial, Verdana, sans-serif;
}
.grid-heading {
width: 500px;
background: #CCC;
font-weight: bold;
}
.grid-body {
width: 500px;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.row {
height: 32px;
display: flex;
align-items: stretch;
position: relative;
}
.row.hidden {
display: none;
}
.more-rows .row.hidden {
display: flex;
}
.cell {
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.cell.actions {
width: 200px;
height: 100%;
justify-content: space-around;
position: absolute;
left: 300px;
top: 0;
}
<p><button onClick="toggleMoreRows()">Toggle more rows</button></p>
<div class="row grid-heading">
<div class="cell">First name</div>
<div class="cell">Last name</div>
<div class="cell">Age</div>
<div class="cell actions">Actions</div>
</div>
<div class="grid-body" id="grid-body">
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row hidden">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
<div class="row">
<div class="cell">Asdf</div>
<div class="cell">Asdf</div>
<div class="cell">12</div>
<div class="cell actions">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
The problem is once you hover over the container and the scrollbar appears, then the content width shrinks. So even if you use a nested container whose width is equal to the container minus its scrollbar, the width of nested container will also shrink.
One solution is to increase the size of the contents by the width of the scrollbar on hover. Here is a solution that doesn't need to use any nested outer containers (categoryCont is the scrolling container and each menuBlock is one of the items to be scrolled):
<div id="categoryCont" style="position:relative;width:200px; overflow:hidden;">
<div class="menuBlock" style="width:200px">a</div>
<div class="menuBlock" style="width:200px">b</div>
<div class="menuBlock" style="width:200px">c</div>
...
</div>
<style type="text/css">
#categoryCont:hover{
overflow-y: auto;
}
#categoryCont:hover .menuBlock{
/* Increase size of menu block when scrollbar appears */
width: 218px; /* Adjust for width of scroll bar. */
}
</style>
One issue with the above is that the width of scrollbar differs slightly in different browsers. One of the following should help:
By using px
Make the content an absolute value with left indent as an absolute value
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute;
left:70px;
}
</style>
By using %
You need both CSS and jQuery(First step is same)
<div class="menuBlock" style="width:200px">
a
</div>
changes to
<div class="menuBlock" style="width:200px">
<span>a</span>
</div>
<style>
.menuBlock span{ /* Good cross-browser solution but cannot use % */
position:absolute; /* This one does not use 'left' */
}
</style>
<script>
// Indent left 30% because container width remains same but content width changes
var leftIndent = (30/100) * $("#categoryCont").width();
$(".menuBlock span").css({"left":leftIndent});
</script>
I'm not really sure what your asking (sorry, I have very little CSS experience), but I think you want to set the width of an HTML div element to 100% with CSS, without having a scroll bar appear. Here is a solution.
#element {
background-color: blue;
height: 40px;
position: relative;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div id="element"></div>
</body>
</html>
A scroll bar appears because of the position, margin and padding properties of the div element. If you set the margin-right, margin-left, padding-right, and padding-left properties to 0, and you set the position property to relative, no scroll bar will appear.
* {
overflow: hidden;
}
simple way to hide the scrollbar
I have following HTML+CSS markup:
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><img src="slide-01.jpg"></div>
<div style="position: absolute;"><img src="slide-02.jpg"></div>
<div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>
Notice that the slides are absolute-positioned inside a relative-positioned element so that the top-left corners of all slides are aligned together. All slides are equal height, but the height is not pre-determined hence this problem: the "protofade" div does not have a height. Is there any CSS trick that can make this div as tall as the first slide without explicitly specifying height: NNpx.
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>
The above code shows your original code (except with divs, as per Scott Brown, above), with the addition of a second copy of "slide 1", positioned with the default algorithm, but with its box hidden. Accordingly, it's container, protofade, has to be large enough to accomomdate the box, even though the box is not displayed.
There is a jQuery answer to this. I don't believe this can be done through CSS as you need to be able to get the height of the first div.
I've illustrated it here: http://jsfiddle.net/thewebdes/FHgz5/
For reference, here's a run down of the code:
HTML
<!--
using DIVs in place of IMGs
setting height to these DIVs, all equal as specified
-->
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
</div>
CSS
/* border set to show height given to DIV */
#protofade { border: 5px solid #000; }
JS
// CSS height set based on the height of the first DIV
// First DIV chosen as all heights will be the same anyway so it shouldn't matter.
$('#protofade').css("height", $('#protofade div:eq(1)').height());