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.
Related
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>
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;
}
http://i.stack.imgur.com/aDBuK.png
http://i.stack.imgur.com/mPbuX.png
How do I get #cols to contain the whole of #botcol's area. I realise this is quite basic but I've been struggling with it for a while, thanks for your help in advance.
Html:
<div id="content">
<img id="worldmap" src="worldmap.png"/>
<div id="cols">
<div id="topcol">
...
</div>
<div id="botcol">
<div id="infopanel">
...
</div>
</div>
CSS:
div#container{
margin-left: auto;
margin-right: auto;
width: 70%;
height:100%;
position: relative;
border: grey solid 1px;
}
#cols {
z-index:1;
position: absolute;
top:0;
left:0;
height:100%;
width:100%;
overflow:auto;
}
#topcol {
width:100%;
overflow:auto;
}
#botcol {
height:100%;
width:100%;
}
div#content{
position:relative;
}
I have got the following code:
HTML:
<div id="mapWrapper" style="height: 624px;">
<div class="box" id="map">
<h1>Campus</h1>
<p>Description Campus Map.</p>
<img src="abc.png">
</div>
</div>
CSS:
.box {
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
padding: 3px;
overflow:hidden;
height:100%;
}
#mapWrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
padding: 10px;
}
#map {
display: inline-block;
position: relative;
}
#map img {
height: 100%;
}
I want the image to take the rest of the height, that is free in the map-div. Currenty the image is set to 100% and that is why it runs out of the box at the bottom. Can someone help? Thanks!
Why not use a display:table setup, the advantage of this is that you can add as much content as you want to the first 'row' and the image will take up the remaining space (whatever is left from the table height minus the first row of content) and scale accordingly.
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='cell'>
<h1>Campus</h1>
<p>Description Campus Map.</p>
</div>
</div>
<div class='row'>
<div class='cell'></div>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.table {
display:table;
table-layout:fixed;
height:624px;
width:100%;
max-height:624px;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
}
.row:first-of-type >.cell {
height:1%;
}
.row:last-of-type >.cell {
height:100%;
background-image:url(http://www.gettyimages.co.uk/CMS/StaticContent/1357941082241_new_banner-700x465.jpg);
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}
I have a div element that scrolls vertically; the scrollbar is within the div element itself. I'd like to have the scrollbar outside of the div, similar to how a typical webpage scrollbar is. Scrollbar looks like any other webpage, but when scrolled only scrolls this particular div element.
<div id="outer">
<div id="inner"> //to be scrolled
<!-- content -->
</div>
</div>
Example Fiddle: http://jsfiddle.net/7pgyt/
I'd like the scrollbar to be to the far right, in the red area. The scrollbar scrolls the blue area. Can this be accomplished in just HTML and CSS?
A possible outcome would be as below:
Given the following html structure:
<div id="wrapper">
<div id="top" class="bar"></div>
<div id="outer">
<div id="inner"></div>
</div>
<div id="bottom" class="bar"></div>
</div>
You can use the following styles:
#wrapper {
position:relative;
height:200px;
}
#outer {
background-color: red;
overflow-y:auto;
height: 200px;
}
#inner {
color: white;
font-weight: bold;
margin-left: auto;
margin-right: auto;
background-color: blue;
margin:50px;
position:relative; z-index:1;
}
.bar {
height:50px;
z-index:2;
position:absolute;
background:red;
left:0;
right:20px;
}
#bottom {bottom:0;}
#top {top:0; }
Example
Example with psuedo selectors instead of the bar divs
You can use the below:
Demo Fiddle
HTML
<body>
<div id="outer"></div>
<div id="inner">..content...</div>
</body>
CSS
body {
position:relative;
width:100%;
margin:0;
padding:0;
}
div {
box-sizing:border-box;
}
#outer {
border:50px solid red;
padding: 50px;
position:absolute;
height:200px;
right:17px;
left:0;
}
#inner {
color: white;
font-weight: bold;
height: 200px;
padding:50px;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
background-color: blue;
}