Here is my fiddle,
HTML
<div id="wrapper">
<div class="notes">One</div>
<div class="notes">two</div>
<div class="notes">three</div>
<div class="notes">four</div>
</div>
CSS
#wrapper {
width: 300px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid black;
}
.notes {
color: red;
border: 1px solid green;
margin: 5px;
width: 200px;
height: 150px;
display: inline-block;
}
I have a wrapper div which has 300px width.
The inner divs are generated dynamically based on the server request and has the width of 200px each.
Now i need to set side by side in the wrapper and when it reach 300px it needs to be displayed in a scrolled mode..
Seems i have some issues in my code. Pls help...
You could give white-space: nowrap; to the wrapper, then reset it to white-space: normal; for each item.
Example Here
#wrapper { white-space: nowrap; }
.notes { white-space: normal; }
You might also want to remove the white-space between inline block elements. There are several approaches to achieve that, one of them could be setting font-size: 0 to the parent, then resetting it to font-size: 16px on the children.
Updated Example
Related
I need to have a div with one line of images, the amount of images inside the div can be changed at any time. So I want I horizontal scrollbar.
I have a structure like the following. I tried to achieve it with css, but unfortanetly it doesn't work.
<div id="scroll-wrapper">
<div id="thumbnails">
<div class="thumbnail-container active">
<img src="foobar" />
</div>
<div class="thumbnail-container">
<img src="bar" />
</div>
</div>
</div>
Code with CSS:
http://jsfiddle.net/c622c3w9/2/
Note that I do not want a solution with javascript.
I had to remove the float: left to get scroll to work
#thumbnails {
padding-bottom: 10px;
max-height: 50px;
min-width: 100px;
overflow-y: hidden;
overflow-x: scroll; /*add this so you get bottom scrollbar*/
white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/
}
.thumbnail-container {
display: inline-block;
position: relative;
line-height: 5px;
border: 2px solid steelblue;
margin: 3px;
display: inline-block;
/*float: left; remove this otherwise scroll will not work*/
margin-bottom: 15px !important;
}
http://jsfiddle.net/c622c3w9/3/
You only need to do two things. Fiddle.
.thumbnail-container {
.......
// float: left; <== Remove
}
#thumbnails {
.....
white-space: nowrap; // Add
}
I have a container div which has children anchored to the bottom. The problem is that when the div's overflow scrollbar appears, the bottom margin of the last child gets hidden.
Please see http://jsfiddle.net/TxEAP/3/. At first, there's a correct margin underneath the 1 div. Clicking "append one" so that the scrollbar eventually appears makes the last div not have a bottom margin anymore. Opening DevTools shows that the margin of that last child is there, but it is outside of the container's viewport, even when scrolling completely to the bottom.
How can this be solved? It would suffice to get this working in Google Chrome.
HTML:
<div class="main">
<div class="container">
<div class="item">1</div>
<!-- several of these .item divs -->
</div>
</div>
CSS:
.main {
height: 200px;
overflow-y: scroll;
position: relative;
border: 1px solid black;
}
.container {
width: 100%;
max-height: 100%;
position: absolute;
bottom: 0;
}
.item {
padding: 20px;
margin: 15px;
border: 1px solid black;
}
Here's my final solution using flexbox. It's supported well enough on Chrome despite all -webkit- prefixes. Basically, the idea is to have a dummy element that, in case of no overflow, fills up the space of the container starting from the top (so that the real children are anchored to the bottom); in case of overflow, it is hidden automatically because of height: 0. It does not suffer from the margin issue, and it does not collapse margins.
http://jsfiddle.net/mCYLm/1/
HTML:
<div class="main">
<div class="gap-filler"></div>
<div class="item">foo</div>
<!-- more `div.item`s -->
</div>
CSS:
div.main {
display: -webkit-box;
-webkit-box-orient: vertical;
height: 200px;
overflow-y: scroll;
}
div.main div.gap-filler {
-webkit-box-flex: 1;
height: 0;
}
div.main div.item {
border: 1px solid black;
margin: 20px;
padding: 20px;
}
Edit: This was a solution without flexbox, but it had selection issues.
A solution that eventually worked was the following: http://jsfiddle.net/TxEAP/7/. This appends hidden "content" which makes Chrome not hide the margin of the last .item div.
.container:after {
content: "";
font-size: 0;
display: block;
height: 1px;
}
Edit: The following only works if display: inline-block is possible.
Finally I found a solution. If all .items have display: inline-block except the first one, then the margin does not get hidden.
http://jsfiddle.net/TxEAP/5/
.item:not(:first-child) {
display: inline-block;
/* attempt at getting `width: auto` like `display: block` has */
width: -webkit-calc(100% - 2 * 15px);
box-sizing: border-box;
}
If you just move the overflow-y: scroll; from .main. to .container class then the margin is preserved. The only drawback is for less than 3 items (for the given container height) you get a small scrollbar placeholder, instead of a full height one.
Removing max-height:100% on the container seems to fix it for my test in Chrome 21.
Moving the properties so that the overflow is on the container, preserves the margin/padding for an element added to the end that results in the scrollbar appearing.
.main {
height: 200px;
border: 1px solid black;
}
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.
I have a divider containing x tables in the form:
<div class="container">
<table>....</table>
<table>....</table>
<table>....</table>
<table>....</table>
</div>
The CSS code that corresponds to this is:
.container{
width: 100%;
clear: both;
border-bottom: solid 2px #036;
white-space: nowrap;
}
table{
display: inline-table;
border-bottom: solid 1px #000;
}
However, when this is applied, there is a gap of ~12px from the bottom border of the table and the bottom border of the divider. If I set "margin-bottom: -12px;" on the table it corrects the positioning error, but not in all browsers.
Does anyone know why there is a margin being made?
There seems to be a problem with display: inline-table, when you replace this with float: left the problem is gone. I have also set overflow: hidden on the .container div, so it takes the full height of the floating tables inside.
EDIT: In order to prevent the tables from wrapping, you could place the tables inside another left floating div that has white-space: nowrap; set.
CSS
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
border-bottom: solid 2px #036;
}
.nowrap {
float: left;
overflow: hidden;
white-space: nowrap;
}
table {
float: left;
border-bottom: solid 1px #000;
border-spacing: 0px;
padding: 0px;
}
HTML
<div class="container">
<div class="nowrap">
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
</div>
</div>
Test<br />
See this updated JSFiddle
Do you have to use <table>? I strongly recomended you to use <div> instead.
However in table (possibly you should add td in your css) set border to 0. This should help.
<div id="content">
<div id="outer">
<div id="header">Transport</div>
<div id="image">
<img src="../images/img1.jpg" style="width:300px;height:300px"/>
</div>
<div id="right_content">large amount of text</div>
</div>
</div>
For the above the css used is:
#content {
width: 100%;
min-height: 600px;
overflow: hidden;
border: 1px solid;
padding: 0;
margin: 0;
}
#outer {
border: 1px solid;
float: left;
overflow: hidden;
width: 100%;
min-height: 200px;
}
#header {
border: 1px solid;
width: 100%;
height: 20px;
background-color: #006A4D;
color: #ffffff;
padding: 10px;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 18px;
clear: both;
overflow: auto;
}
#right_content {
border: 1px solid;
overflow: hidden;
min-height: 300px;
padding: 10px;
float: left;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
#image {
border: 1px solid;
min-width: 300px;
min-height: 300px;
padding: 10px;
float: left;
overflow: hidden;
}
Both the inner divs are float:left. But the output comes as one div below the other. How can I get them to appear side by side?
Works fine for me at http://jsfiddle.net/gaby/zv4zG/
The thing to keep in mind is that if you do not specify widths for the floated elements, and they grow in size in order to accommodate their contents, they may reach a size (when added) that exceeds their container width. At that point they will break and one will go below the other.
So, you have to ensure that their added widths (and horizontal paddings and margins) will never exceed their containers width.
the outer div has a 100% width, witch tells the browser to ocupy all the available width, that's why the second div drops beneath.
The solution is simple, make sure both divs have enough width to be able to be side by side.
You don't need to float the #right_content, just add a left margin wide enough to accommodate the image and drop the overflow:
#right_content{
border: 1px solid;
min-height: 300px;
padding: 10px;
margin-left: 322px;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
Live example: http://jsfiddle.net/ambiguous/8m3LS/
I gave #image and #outer a width and #right_content a negative margin to account for the #image's space.
jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/
DIVs are block-level elements, meaning that they will stack vertically by default. In order to make them appear side-by-side, you will also need to set display: inline; in your CSS.
UPDATE
I just created this jsfiddle and it looks like your layout is fine... not sure what the issue is. Could it be browser specific?
As we give width to one of the div, it leaves the extra space for next div, but make sure the width of both divs do not exceeds the browser's width, otherwise the second div will move below the first div. this css worked for me:
#left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}
<div id="left">
left div
</div>
<div id="right">
right div
</div>