I have a div with
display:inline-block;
postion:relative;
inside a div with
display:block;
width:348px;
overflow:hidden;
When the contents of the inner div overflow, I want them to expand horizontally, not vertically. The contents of the inner div consists of thumbnails of photos
You just need to set white-space: nowrap on either of the divs (the property is inherited). (Source)
Sidenote: The inner div is not necessary for this to work.
Demo: JSFiddle
HTML
<div class="container">
<div>
<!-- Thumbnails -->
</div>
</div>
CSS
.container {
display: block;
width: 348px;
overflow: hidden;
white-space: nowrap;
}
.container div {
position: relative;
display: inline-block;
}
Ray Z!
Overflow does matters. So in order to write your css as just
overflow:"hidden"
you should use
overflow-x: hidden;
overflow-y: scroll;
Set the width and overflow-x as auto for the inner div
<div id = "outer">
<div id = "inner"></div>
</div>
#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}
#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}
Here is the fiddle http://jsfiddle.net/jgrgb/
Related
How could I vertically center a child within a parent ?
And, the width and height of child and parent is fixed, but unknown.
How could I realize it?
<div class="parent">
<div class="child"></div>
</div>
My prefered technique for centering a box both vertically and horizontally requires two containers.
The outher container
should have display: table;
The inner container
should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;
The content box
should have display: inline-block;
should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered
The elegance of this technique, is that you can add your content to the content box without worrying about its height or width!
Just add your content to the content box.
Demo
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<p>You can put anything here</p>
<p>Yes, really anything!</p>
</div>
</div>
</div>
See also this Fiddle!
in css vertical-align:middle is used to align a child vertically centre. But this property is applied to only those elements which havedisplay:inline-block or display:table-cell. So accordingly try to apply display property and you will get vertically centre position of your elements.
You can center things through:
margin: 0 auto;
Try this code
body {
margin: 0;
padding:0;
}
.div1 {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.div2 {
width: 50vw;
height: 50vh;
background: #999;
}
As seen in this fiddle, I have a div with overflow-x: hidden and overflow-y: visible, and it still displays a scrollbar. Removing the display: flex or height attributes from outer div, or overflow-x: hidden fixes the problem.
Here's the fiddle HTML:
<div class="outer">
<div class="inner">Text<br>More text<br>Even more text</div>
</div>
CSS:
div.outer {
display: flex;
height: 30px;
overflow: visible;
}
div.inner {
overflow-x: hidden;
overflow-y: visible;
border: 1px solid black;
}
The issue with overflow-x/y is that visible can't be mixed with another value, so in this case, visible will be treated as auto.
I m trying to center an image in a div while keeping the aspect ratio - I m using this code but somehow its not aligning the item in the center (top/bottom center). If possible using only CSS.
The size of the image is not known since its using max widths!
JSfiddle: http://jsfiddle.net/L41wpza6/2/
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: block;
margin: 0 auto;
vertical-align: middle;
}
Any help is appreciated! I am not sure what I am missing to make this work.
JSFiddle - DEMO
You should use display: inline-block; to #imageHolder img to vertical-align middle.
CSS display inline-block property allows elements to flow like inline elements but respect properties, such as width, like block elements and you can use display Inline-block to set vertical-align middle.
HTML:
<div id="imageHolder">
<img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>
CSS:
#imageHolder {
width: 400px;
height: 400px;
line-height: 400px;
background-color:#CCCCCC;
}
#imageHolder img {
max-width: 100%;
max-height:100%;
display: inline-block; /* Instead of display: block; */
margin: 0 auto;
vertical-align: middle;
}
for one looking for horizontally center.
Solution of #sibbl worked, but there is still some pixels on the top of image in horizontal case.
I have imporoved #Anoymous code
HTML:
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/400">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/800/800">
</div>
<div class="imageHolder">
<img src="http://lorempixel.com/g/400/800">
</div>
CSS:
.imageHolder {
width: 300px;
height: 300px;
background-color:#CCCCCC;
margin:10px;
display:inline-block;
float:left;
position:relative;
}
.imageHolder img {
max-width: 100%;
max-height:100%;
margin: auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
JSFiddle - DEMO
Basically I have a nested <div> as a footer and the parent div is centered 1000px wide.
I was wondering if it was possible to extend the width of footer div so that it goes out of the parent to fit the browsers width but still keeps its place in the parent?
My solution assumes that .parent element has stretched height. even if it is not the case, then it seems you want the .footer element stick to the bottom of the page. If it is so, then using position:absolute you can bring the child block out of the parent block and then pin it to bottom using bottom: 0px and then to stretch its width use left:0px and right: 0px.
Working Fiddle
UPDATED:
Use this Doctype declaration:
<!DOCTYPE html>
Also, in .footer element mention top:auto css property. Something like this:
.footer{
padding: 0px 15px;
height: 50px;
background-color: #1A1A1A;
position:absolute;
bottom: 0px;
left: 0px;
right: 0px;
top: auto; /* added (IE FIX) */
}
Something that would work for you:
.parent{
width: 300px; /* your parent width */
}
.footer{
height: 50px; /* your footer height */
position:absolute;
left: 0px;
right: 0px;
}
Demo
You could set the footer position to relative and set the left property to -100px and width to 1200px for example.
Better still don't have it in the parent div, have it as it's own div with it's own values set.
Do like this
html
<div id="parent" class="wrap"></div>
<div id="footer"></div>
css
.wrap{width: 1000px;}
#footer{width: 100%;}
Try this CSS.
#footer {
position:absolute;
bottom:0;
width:100%;
}
Try this css this will definitely work as you want
html,body{
height: 100%;
padding: 0px;
margin: 0px;
}
.parent{
width: 400px;/*put your width here*/
height: 100%;
background-color: #ccc;
margin: 0 auto;
}
.footer{
padding: 15px 0px;
height: 30px;
background-color: #000;
position:absolute;
bottom: 0px;
left: 0px;
width:100%
}
If you really want to bypass the parent element, you could look into display:contents
https://css-tricks.com/get-ready-for-display-contents/
It really is a game changer if you need a div to wrap elements for some logic reason, but want the styling of all seperate elements.
Example without:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shamefull_button</button>
</div>
Example with:
.main {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
}
.title {
display: contents;
}
<div class="main">
<div class="title">
<h2>Foo</h2>
<span>Bar</span>
</div>
<button>shameless_button</button>
</div>
I have the following css but the scroll bars are visible. how can I make them invisible (scrollable div without scrollbars)?
.myDiv
{
height:300px;
overflow: scroll;
}
.myDiv {
width: 200px;
height:300px;
overflow: scroll;
}
.wrapper {
width: 183px;
height: 283px;
overflow: hidden;
border: 1px solid black;
}
<div class="wrapper">
<div class="myDiv">
floating div content...
</div>
</div>
This might work - basically you're placing a smaller div around the one you want and hiding the scroll bars.