I've got the bx-slider that has overflow:hidden on its wrapper. My layout dictates, that one element should break out of the box and lay above the top edge.
Does not sound hard at all - thats what overflow-y and x is for. I thought.
But no matter what I do, once I set one of the values to hidden, the other (x or y) is hidden too.
I've made a testcase which simulates the slider. I want only the grey element to be displayed in full size out of the wrapper box. The next elements should not be displayed until they flow into the viewport.
.wrapper {
margin: 50px auto;
width:400px;
overflow-x:hidden;
}
.sliderContainer {
width:1400px;
}
.sliderElement {
width:400px;
height:200px;
background-color:red;
display:inline-block;
margin-right:50px;
}
.breakoutElement {
width:50px;
height:50px;
background-color:grey;
margin: -25px auto 0 auto;
}
<div class="wrapper">
<div class="sliderContainer">
<div class="sliderElement">
<div class="breakoutElement"></div>
</div>
<div class="sliderElement"></div>
<div class="sliderElement"></div>
</div>
</div>
The reason for this behavior is according to the W3C spec:
[...] some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
You simply can add a top margin to your slide elements and adjust their size accordingly:
.sliderElement {
...
height: 175px;
margin-top: 25px;
...
}
If you want your slide to be exactly 200px, simply adjust the wrappers height.
.wrapper {
margin: 50px auto;
width: 400px;
overflow-x: hidden;
}
.sliderContainer {
width: 1400px;
}
.sliderElement {
width: 400px;
height: 175px;
background-color: red;
display: inline-block;
margin-right: 50px;
margin-top: 25px;
}
.breakoutElement {
width: 50px;
height: 50px;
background-color: grey;
margin: -25px auto 0 auto;
}
<div class="wrapper">
<div class="sliderContainer">
<div class="sliderElement">
<div class="breakoutElement"></div>
</div>
<div class="sliderElement"></div>
<div class="sliderElement"></div>
</div>
</div>
See this post for more information about the overflow problem.
Instead of margin add padding to wrapper.
Try this
.wrapper {
margin: auto auto;
padding:50px 0px;
width:400px;
display:block;
overflow-x:hidden;
}
.sliderContainer {
width:1400px;
}
.sliderElement {
width:400px;
height:200px;
background-color:red;
display:inline-block;
margin-right:50px;
}
.breakoutElement {
width:50px;
height:50px;
background-color:grey;
margin: -25px auto 0 auto;
}
<div class="wrapper">
<div class="sliderContainer">
<div class="sliderElement">
<div class="breakoutElement"></div>
</div>
<div class="sliderElement"></div>
<div class="sliderElement"></div>
</div>
</div>
Related
I wanted to center a div. i did so with margin and float property..but the margin values is not working properly
.body {
width: 100%;
float: left;
}
.content {
width: 70px;
margin: 10px auto 10px auto;
float: none;
border:1px solid red;
}
.content p{float:left;margin:0;}
<div class="body">
<div class="container">
<div class="content"><p>hello all<p></div>
</div>
</div>
here the margin top and bottom values(i.e 10px) is not working properly..margin bottom value is commencing from the top which should have from the bottom!
It's best not to center with float as it takes the element out of the normal document flow. Center with margin 'auto' instead.
HTML
<div class="body">
<div class="content">hello all</div>
</div>
CSS
.body{
width: 100%;
}
.content{
display:block;
width: 70px;
margin: 10px auto;
}
You can try :
body{
margin:0px;
}
.container{
width: 100%;
}
.content{
display:block;
width: 70px;
margin: 10px auto;
}
This scenario is somewhat different than the traditional margin:0 auto.
I try to center a div above another div, while both of them are in the same div (no need to look like they are in the same div, because blue box will be bigger than black box on top)!
I have create a fiddle of what I got so far, and I did align the top div into sort center, but its center in a sense of top left corner of each div. I want to center in a sense that, the blue box is RIGHT above the blackbox, but the bluebox's middle line is aligned with the middleline of the blackbox. So something like this
|______|
|__|
top box blue, bottom box black
But I just can't think of a way to do that.
http://jsfiddle.net/adamchenwei/nay8fe5q/
HTML
<div class="blockcontainer">
<div class="blockcenterbox">
<div class="blocktop">abc</div>
</div>
<div class="blockbottom"></div>
</div>
CSS
.blockcontainer {
margin:0 auto;
width:25px;
background-color:#00CC66;
}
.blocktop {
width:100px;
background-color:#6699FF;
height:50px;
}
.blockcenterbox {
width: .1px;
height: 5px;
background-color: yellow;
margin: 0 auto;
position: relative;
float: none;
}
.blockbottom {
width:25px;
height:25px;
background-color:black;
}
Is this what you're trying to achieve?
.blue {
width: 200px;
height: 100px;
background-color: blue;
}
.black {
width: 150px;
height: 80px;
background-color: black;
margin: 0 auto;
}
.blockcontainer {
margin: 0 auto;
width: 200px;
}
<div class="blockcontainer">
<div class="blue"></div>
<div class="black"> </div>
</div>
Try this working link at plnkr:
http://plnkr.co/edit/OaQBWxlIfa2fVvanKKEl?p=preview
Hope it helps!!!
HTML
<div class="blockcontainer">
<div class="blockcenterbox">
<div class="blocktop">abc</div>
</div>
<div class="blockbottom"></div>
</div>
CSS
.blockcontainer {
width:200px;
height:200px;
background-color:#00CC66;
overflow:hidden;
}
.blocktop {
width:100px;
background-color:#6699FF;
height:50px;
}
.blockcenterbox {
width: 100px;
height: 50px;
background-color: yellow;
margin: 0 auto;
}
.blockbottom {
width:25px;
height:25px;
background-color:black;
margin: 0 auto;
}
I've created the below jsfiddle recreating my problem, I want that the .dashboard & .inner-dashboard have always a 100% height and keep the footer always at the bottom.
http://jsfiddle.net/rv7xN/1/
HTML
<div id="wrap">
<body>
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
</body>
</div>
<div id="footer"></div>
CSS
html,body{
height:100%;
}
#wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer {
height: 60px;
background-color: blue;
}
.dashboard{
width: 100%;
height: auto;
min-height: 100%;
position: absolute;
padding-bottom: -60px;
background-color:green;
}
.inner-dashboard{
height:100%;
padding-bottom: -60px;
background-color:red;
}
Here's an example : jsFiddle
I had to modify the html to have a common container for the dashboard and the footer.
<div id="wrap">
<div class="dashboard">
<div class="inner-dashboard">
</div>
</div>
<div id="footer"></div>
</div>
I turn the wrapper (common container) in a table and the other elements in table-cell.
So even if your dashboard is height 200%, the footer's still at the bottom.
html,body{
height:100%;
}
#wrap {
position:absolute;
display:table;
height:100%;
width:95%;
padding-bottom:60px;
}
.dashboard{
width: 95%;
height: 200%;
display:table;
border:5px solid green;
}
.inner-dashboard{
width: 95%;
height: 100%;
display:table-cell;
border:5px solid red;
}
#footer {
display:table;
height: 60px;
width:95%;
border:5px solid blue;
bottom:-10px;
}
Is that it ?!
I have added modified your css and added position attribute
I hope the revision solves your issue: [UPDATE] http://jsfiddle.net/saurabhsharma/rv7xN/3/
We're building an application to run on both desktop and mobile, so we're making our site as dynamic as we can.
In the new design, we've got a full width, fixed top, fixed-height header, followed by a max-width header, fixed position header, max-width footer bottom-fixed, and a center scrollable area to fill up the rest of the vertical space.
I've got the headers and footers fixed and seemingly working right, but the center body isn't filling the center space.
Here's the code and fiddle I've been working in: http://jsfiddle.net/chazthetic/KE5cX/2/
<div id="top">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="sub">
<div id="mid">
<div id="inside">
<div id="insideHeader">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
<div id="insideInner">
<div id="div" style="float:left;color:white;">a
<div id="div" style="float:right;color:white;">1
</div>
</div>
<div id="bot">
<div style="float:left;color:white;">a<br /></div>
<div style="float:right;color:white;">a<br /></div>
</div>
</div>
</div>
And the accompanying CSS:
* {
margin: 0;
}
html, body {
margin: 0;
}
#top {
height: 100px;
width: 100%;
background: #f00;
z-index: 5;
margin:0px;
padding:0px;
position:fixed;
top:0px;
}
#sub {
position:relative;
width: 100%;
margin:100px 0 0;
height:100%;
}
#mid {
background: #222;
width:100%;
max-width:400px;
height:100%;
margin:0 auto;
}
#push {
height: 150px;
}
#inside {
width:100%;
height:100%;
padding:0 0 0 0;
margin:50px 0 50px;
overflow:auto;
}
#insideHeader {
height:50px;
background: #0ff;
width:100%;
margin:100px auto 0;
top:0px;
position:fixed;
max-width:400px;
}
#insideInner {
height:100%;
width:100%;
display:table;
overflow:auto;
}
#inside #div {
height: 50px;
width: 50px;
background: #888;
border: 1px solid #fff;
}
#bot {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
max-width: 400px;
background: #0ff;
z-index: 2;
margin:0px auto;
left:auto;
right:auto;
}
Am I missing something to make the inside div work right? Is this solution even possible?
I figured it out!
Turns out it is possible and I was missing height:100%; on the body tag.
Once I added that, the center area filled up the space and voila, it scrolled! I also needed to add a bit of padding to the insideInner div (thanks #alireza) so the header didn't overlay any of it.
I have this HTML:
<div id="cont">
<div class="chatarea">
<div class="row">
<div class="message">
<div class="nick">
<p>Some Nick</p>
</div>
<p>Some Message</p>
<div class="timestamp"><p>Some Timestamp</p></div>
</div>
</div>
</div>
</div>
and this CSS:
#cont {
width:100%;
text-align:center;
}
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px;
width:80%;
}
.nick
{
width: 400px;
border-right-style: solid;
text-align: center;
height:100%; position:absolute; top:0; left:0;
}
.timestamp
{
width: 400px;
border-left-style: solid;
position:absolute; top:0; right:0; height:100%;
}
.message
{
border-style: solid;
padding:0 50px 0 140px;
overflow:hidden;
position:relative;
}
im trying to display 3 divs (left and right smaller than the centre one) in the centre of the page. 80% of the browser width.
i have made a fiddle here: http://jsfiddle.net/zQ9pu/
im having a bit of trouble with it - what would be the best way to do this?
Just add
.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}
It works fine !! here is ur new fiddle http://jsfiddle.net/zQ9pu/2/
Contain those divs in a parent block level element which has a specified width and then apply CSS margin-left: auto; margin-right: auto; on it.