Im working on a page.. where Margin 0 auto not work in div with display:table cell
here's my codeCSS Styles
<style>
html,body{
height:100%;
width:100%;
}
.wrapper{
background-color:#999;
height:500px;
}
.tableContent{
display:table;
height:500px;
}
.tableContentRow{
display:table-row;
}
.tableContentCell{
display:table-cell;
vertical-align:middle;
height:500px;
}
.loginBox{
height:100px;
background-color:#FFF;
width:250px;
margin:0 auto;
}
</style>
Here's the HTML
<div class="wrapper">
<div class="tableContent">
<div class="tableContentRow">
<div class="tableContentCell">
<div class="loginBox">
<!-- More contents Go HEre -->
</div>
</div>
</div>
</div>
</div>
The loginBox div does not position to the center of the tableContentCell divPlease help...
Set a specific width on the .tableContentCell div and you'll be ok.
Fiddle
The table itself is not centered.
Check this fiddle.
.tableContent{
margin:0 auto;
}
Related
I have 3 divs within a container with each of their widths set at 100%. if I float them all left they will stack on top of each other. What I would like for them to do is float next to each other horizontally. Changing the width of the div to a fixed width works fine. How can I achieve this? Thank you for your help and time.
html
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
css
body, html {
margin:0;
padding:0;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
}
.slide {
height:100%;
width:100%;
margin:0;
padding:0;
float:left;
}
https://codepen.io/justinhdevelopment/pen/bGexaJy codepen example of problem
Here is some use of flex and overflow-x to make your desired effect. You can further make changes as per your need-
body, html {
margin:0;
padding:0;
overflow: none;
}
#slide-container {
height:400px;
width: 100%;
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
}
.slide {
height:400px;
min-width:100%;
}
#scroller {
min-width:100%;
height:400px;
background-color:blue;
position:relative;
overflow:hidden;
}
<div id="scroller">
<div id="slide-container">
<div class="slide" style="background-color:yellow;">
</div>
<div class="slide" style="background-color:orange;">
</div>
<div class="slide" style="background-color:red;">
</div>
</div>
</div>
If I am understanding what you are looking for correctly what you are looking for is using a flex display in your parent div:
#slide-container {
height:100%;
position:relative;
left:0;
white-space:nowrap;
font-size:0;
display: flex;
}
Take a look at this for further reference:
https://www.w3schools.com/css/css3_flexbox.asp
Is it possible to put a 90 degree flip a div next to a normal horizontally?
In my example, I want the blue div ("some text") to be vertical and be next to the horizontal "bottom-right" div. Is it possible to do so while making it responsive? I don't want just the text to be flipped, I want any items I put inside that div to also be flipped.
https://jsfiddle.net/duah6svr/1/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
width:600px;
height:600px;
background:gray;
}
.top{
float:right;
height:30%;
background:red;
width:80%;
}
.bottom{
width:100%;
height:70%;
background:green;
float:right;
}
.bottom-right{
float:left;
height:100%;
width:80%;
background:pink;
}
.vertical-invert{
width:20%;
height:100%;
background:blue;
}
<div class="big-div">
<div class="top">
</div>
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
You can use a flexbox and the writing-mode attribute. Here is a working fiddle demonstrating. In case you want to change the text orienation you can use something different for writin-mode as described here
Updated version: Bottom of the text is on the left side. The trick is to set the writing-mode to vertical-lr
HTML:
<div class="big-div">
<div class="bottom">
<div class="vertical-invert">SOME TEXT</div>
<div class="bottom-right"></div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.big-div{
background:gray;
}
.bottom{
width:100%;
height:70%;
display: flex;
flex-direction: row;
}
.bottom-right{
width:80%;
background:pink;
}
.vertical-invert{
width: 20%;
background:blue;
writing-mode: vertical-lr;
text-align: left;
}
My CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
.wrapper{
width:80%;
height:100%;
min-height:auto
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background:red;
}
.wrapped-nav{
width:30%;
float:left;
background:green;
height:auto;
min-height:100%;
}
.wrapped-ent{
width:70%;
float:left;
background:blue;
height:auto;
min-height:100%;
}
My HTML
<body>
<div class="wrapper">
<div class="wrapped-nav">Nav
</div>
<div class="wrapped-ent"></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>Example</div>
</div>
</body>
jsbin: http://jsbin.com/cefegifula/edit?html,css,output
When I enlarged the Ent div with those and this overcome the div Nav, a space is created as in the jsbin show, is there a way to do 2 divs has the same height?
create a class that has height and refactor your code so that both divs have it.
so instead of using 100% for both divs use vh, px, or em to your advantage.
I would write it so that you have something like this.
<div class="class1 heightfix">
</div>
<div class="class2 heightfix">
</div>
and then in your css write
.heightfix{
height: 70vh; // or px or whatever.
}
in other news never try to use <br/> in order to fix your spacing problems.
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I need to arrange three columns of divboxes with 33% width of the outer box, besides a fixed-width menu.
http://jsfiddle.net/uvw5c/1/
So i want the red, yellow, green area beides the orange menu, in ANY case of width of #menu.
<div id="container">
<div id="menu">
menu
</div>
<div id="dialogbox">
<div id="outer">
<div class="inner" style="background-color:red;">
col1
</div>
<div class="inner">
col2
</div>
<div class="inner" style="background-color:green;">
col3
</div>
</div>
</div>
</div>
#container{
width:500px;
background-color:grey;
height:300px;
}
#menu{
width:300px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
float:left;
height:100%;
width:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33%;
background-color:yellow;
height:100%;
float:left;
}
Thanks in Advance for any hints!
For this specific case you can do away with a lot of the markup and use display: table; and table-cell;. Set the width of the menu, and the others will automatically fill the rest equally.
HTML:
<div id="container">
<div id="menu">
menu
</div>
<div class="inner" style="background-color:red;">
test
</div>
<div class="inner">
test
</div>
<div class="inner" style="background-color:green;">
test
</div>
</div>
CSS:
#container{
width:500px;
display: table;
height: 300px;
}
#menu{
width: 100px;
background: #00f;
display: table-cell;
}
.inner{
padding:0;
margin:0;
background-color:yellow;
height:100%;
display: table-cell;
}
Fiddle: http://jsfiddle.net/Kyle_Sevenoaks/uvw5c/5/
Make a div containing both the menu and the .inner elements.
Also check that width of inner must be 33.3% and 33.4% for one element (maybe the one in the middle)
I found a solution with the help of a friend:
http://jsfiddle.net/t39yV/2/
its very smart to use margin-left on the #dialogbox ;)
#container{
width:100%;
background-color:grey;
height:300px;
}
#menu{
width:100px;
float:left;
height:100%;
background-color:orange;
}
#dialogbox{
margin-left:100px;
height:100%;
}
#outer{
background-color:blue;
height:300px;
margin: 0 auto;
padding:0;
width:100%;
}
.inner{
padding:0;
margin:0;
width:33.3%;
background-color:yellow;
height:100%;
float:left;
}