How to get inline divs with scrollbar and other divs inside them. When I made just inline divs with scrollbar everything works fine, but when I try to put other divs inside everything collapse.
I need to have something like this:
Simple code:
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
CSS 1(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
position:relative;
}
#customDiv1{
position:absolute;
left:10px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:20px;
width:60px;
height:50px;
}
CSS 2(inline not working properly):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
display: inline-block;
}
#customDiv1{
margin-top:50px;
width:50px;
height:50px;
}
#customDiv2{
margin-top:10px;
width:60px;
height:50px;
}
CSS 3(scrollbar not working):
.inlineContainer{
width:100%;
height:150px;
overflow:scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv{
height: 100px;
width: 100px;
float:left;
position:relative;
}
#customDiv1{
position:absolute;
left:20px;
width:50px;
height:50px;
}
#customDiv2{
position:absolute;
left:10px;
width:60px;
height:50px;
}
Apply vertical-align: top; to the inline-blocks to make them align at the top of their container:
div {
border: 1px solid #777;
}
.inlineContainer {
width: 100%;
height: 150px;
overflow: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.inlineDiv {
height: 100px;
width: 100px;
display: inline-block;
vertical-align: top;
}
#customDiv1 {
margin-top: 50px;
width: 50px;
height: 50px;
}
#customDiv2 {
margin-top: 10px;
width: 60px;
height: 50px;
}
<div class="inlineContainer">
<div class="inlineDiv">
<div id="customDiv1">inside div 1</div>
</div>
<div class="inlineDiv">
<div id="customDiv2">inside div 2</div>
</div>
</div>
Related
Quick question regarding positioning an absolute div in a parent display: table-cell in IE.
I have created a jsfiddle of the layout that I am trying to create and it works in chrome and firefox but in IE it breaks the .list-container absolute height of the child (which is se to to fill all space from the top 118px down) when inside of a parent with display: table-cell .
Is there any IE styling rules that I am missing to help it render the absolute child? Is this something that is possible in IE?
jsFiddle
html, body{
height:100%;
margin:0;
padding:0px;
}
.table{
display : table;
width : 100%;
height : 100%;
}
.row{
display : table-row;
width : 100%;
height : 100%;
}
.table-cell{
height:100%;
width:50%;
border:1px solid #000;
display : table-cell;
position: relative;
}
.header{
position:relative;
top:0px;
height:112px;
margin:0px;
border:3px solid blue;
background: rgba(0,0,230, .2);
}
.list-container{
position:absolute;
top:118px;
left:0px;
bottom:0px;
right:0px;
margin:0px;
overflow:auto;
overflow-x:hidden;
border:3px solid #CCC;
background: rgba(0,0,0,.1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I found that in IE a table-cell only accepts the height from the child elements. If you add a wrapper div.table that has a styleof 100% with and height around the header.header and div.list-container it will give thew parent div.table-cell aheight of 100% of the parent table.
here is a jsfiddle showing the changes:
jsFiddle
html,
body {
height: 100%;
margin: 0;
padding: 0px;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
width: 100%;
height: 100%;
}
.table-cell {
height: 100%;
width: 50%;
border: 1px solid #000;
display: table-cell;
position: relative;
vertical-align: top;
}
.header {
position: relative;
top: 0px;
height: 112px;
margin: 0px;
border: 3px solid blue;
background: rgba(0, 0, 230, .2);
}
.list-container {
position: absolute;
top: 118px;
left: 0px;
bottom: 0px;
right: 0px;
margin: 0px;
overflow: auto;
overflow-x: hidden;
border: 3px solid #CCC;
background: rgba(0, 0, 0, .1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
Can someone tell me why the box div won't vertically align please? I also tried using a table and it won't align either. Thanks!
<html>
<head>
<style>
#box{
width:400px;
height:400px;
background-color:black;
}
#tb{
display:table;
width:100%;
}
#td{
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
</head>
<body>
<div id="tb">
<div id="td">
<div id="box"></div>
</div>
</div>
</body>
</html>
Css:
#box {
width:400px;
height:400px;
background-color:black;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/9uGAU/
Try this one
HTML
<div id="tb">
<div id="td">
<div id="box"></div>
</div>
</div>
CSS
html, body {
height:100%;
}
#box {
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #000;
margin: 0 auto;
}
#tb{
display: table;
height: 100%;
width: 100%;
background: #999;
text-align: center;
}
#td {
display: table-cell;
width: 100%;
height: 100%;
background: #999;
text-align: center;
vertical-align: middle;
}
Live Demo
I am trying to display 3 divs like a horizontal line.
Like this:
This is my HTML :
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
This is my CSS so far:
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: block-inline;
}
UPDATE :
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: inline-block;
}
But I can't get it to work.
Hope someone will help me.
Thank you.
A few problems:
it's inline-block not block-inline
position:absolute, left, bottom is unnecessary
You were using white as that background for it so you might not have been able to see it
jsFiddle
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
display: inline-block;
}
There is another method using float:left; but inline-block is sufficient for your needs.
jsFiddle
HTML
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
<div class="clear></div>
CSS
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
float:left;
margin:2px;
}
EDIT: Here is a fix to your problem on the fiddle you put in comments. I wrapped the image and name in a div with a fixed height. That pushed them down.
There's an error in your code - it should be
display: inline-block;
I wouldn't use absolute position for this, try this:
.notactive {
height: 10px;
width: 90px;
background: #fff;
cursor: pointer;
float: left;
}
Yes display: inline-block is your best option.
Remove absolute positioning unless there is a specific reason for it.
.notactive:nth-child(1){left:0px;}
.notactive:nth-child(2){left:100px;}
.notactive:nth-child(3){left:200px;}
<html>
<head>
<style>
.left
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
.centre
{
background-color:red;
width:33%;
float:left;
height:200px;
}
.right
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
</style>
<body>
<div class="left"></div>
<div class="centre"></div>
<div class="right"></div>
</body>
</html>
try this coding that I have Created for you
<html>
<head>
<style>
.notactive1
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:100px;
}
.notactive2
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:200px;
cursor: pointer;
}
.notactive3
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:300px;
cursor: pointer;
}
</style>
<body>
<div class="notactive1"></div>
<div class="notactive2"></div>
<div class="notactive3"></div>
</body>
</html>
Another Answer Hope You Statisfied by this ans......
<div>
<div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
<div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
<div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>
I've played around for a while with float, display, inline-block, inline, block, and can't seem to find the right way to "justify" the divs with in the div. Here is the HTML portion of it:
<body>
<div id="container">
<div align="center" id="header">
<h1>This is my header area</h1>
</div>
<nav>
HOME |
COC |
ID CARDS |
SCHEDULE |
FORMS |
CFS |
MEDIA |
LINKS |
CONTACT US
</nav>
<div class="boxes">
<div id="box1">
Content box 1
</div>
<div id="box2">
Content box 2
</div>
<div id="box3">
Content box 3
</div>
</div>
<div id="main">
<h1>This is the main Div</h1>
<p>This is my paragraph Area</p>
</div>
<div align="center" id="footer">
<h3>(This is my footer area)<br>
Copyright 2012-2013 blah blah blah </h3>
</div>
</div>
</body>
This is my CSS:
body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;
}
nav {
padding:10px;
}
#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;
}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;
}
#box1 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#box2 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#box3 {
width: 150px;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#main {
clear:both;
}
I've researched it but I can't really seem to get it right.
I want box 1 2 and 3 to even space throughout the width of the
Any suggestions?
replace your css with below--
body {
font:"Times New Roman", Times, serif;
background-color:#333;
margin: 0;
padding: 0;
color:#06C;
}
nav {
padding:10px;
}
#container {
width: 80%;
max-width: 1260px;
min-width: 780px;
background-color:#0B0B0B;
margin: 0 auto;
text-align: left;
}
.boxes {
width:100%;
display:inline-block;
margin:10px;
padding:10px;
}
#box1 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
margin-left:60px;
}
#box2 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
padding-left:25px;
margin:10px;
padding:10px;
}
#box3 {
width: 25%;
height: 150px;
border:1px;
border-style:dashed;
float:left;
margin:10px;
padding:10px;
}
#main {
clear:both;
}
Best of luck !
You can give each of your 3 boxes a 25% of width to fit the parent div.
#box1 {
width: 25%;
}
#box2 {
width: 25%;
}
...
http://jsfiddle.net/4chjf/1/
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.