I have a large div at 100% width, with a smaller div inside at 1086px;
I am trying to get the small div to be centered horizontally and it's content vertically centered.
Where am I going wrong?
<html>
<head>
<title>test</title>
<style>
body {
margin:0; padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">asd</div>
</div>
</body>
</html>
vertical-centered is just working for table-cells. If you want to horizontally align, you should use display:table-cell;
Try this code;
http://codepen.io/ogzhncrt/pen/rVRONG
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
height: 446px;
background: red;
margin: 0;
padding: 0;
}
.inner {
display: table;
width: 1086px;
height: 446px;
background: yellow;
margin: 0px auto;
}
.center {
vertical-align: middle;
display: table-cell;
}
.inner {
margin: auto;
width: 1086px;
height: 100%;
background: yellow;
/* margin: 0px auto;
vertical-align:middle; */
/* If you can use flexbox
display: flex;
justify-content: center;
align-items: center;
*/
}
/* If you can't */
.inner > p {
margin: 0;
height: 50%;
transform: translateY(100%);
text-align: center;
}
You can use flex box like this:
body {
margin:0;
padding:0;
}
.wrapper {
width:100%;
height:446px;
background:red;
margin:0;
padding:0;
}
.inner {
width:1086px;
height: 446px;
background: yellow;
margin: 0px auto;
vertical-align:middle;
display: flex; /*added*/
align-items: center; /*added*/
}
<div class="wrapper">
<div class="inner">
<div>here the content</div>
</div>
</div>
See the snippet in Full Page.
Check this out for full information
Related
I can't seem to change the width of my checklist. I'm trying to reduce the width and have some margin around the checklist item but it doesn't work. Here's what I have so far: https://jsfiddle.net/h64f1otw/1/
Snippet of my checklist:
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
columns: 2 4em;
}
.checkList li{
color: #fff;
}
I'm trying to achieve something like below:
what i did is adding display:flex for ul element and applying margin on li element with width:50% for each
to center your div you need to add margin:0 auto on heroInner class and remove padding on content class
.hero {
position: relative;
height: 44vh;
max-height: 64rem;
min-height: 28rem;
}
.background {
background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
}
.overlay {
background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
width: 100%;
padding-top: 6rem;
padding-bottom: 6rem;
vertical-align: middle;
text-align: center;
}
.content {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media (min-width: 62.25rem)
{
.content {
padding-left: 3rem;
padding-right: 3rem;
}
}
.heroInner {
text-align: left;
max-width: 31rem;
margin:0 auto;
}
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.checkList li{
color: #fff;
margin-top: 30px;
}
.checkList li:nth-child(odd){
width:30%;
}
.checkList li:nth-child(even){
width:60%;
}
<div class="hero">
<div class="background"></div>
<div class="overlay">
<div class="inner">
<div class="content">
<div class="heroInner">
<div class="checkListContainer">
<ul class="checkList">
<li>Long term leases</li>
<li>Bespoke solutions</li>
<li>Multi city campaigns</li>
<li>Measuring success with data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
This is Html page and I can't make the image .loader centered and at the bottom of .please-wait. How to make it centered and at the bottom?
HTML File
<div id="container">
<main id="main" class="welcome">
</main>
<aside id="aside-right">
<img alt="Welcome" src="../images/panel.png" />
<div class="please-wait">
<h3>Please Wait</h3>
<img class="loader" src="../images/loading.gif" alt="Loading">
</div>
</aside>
</div>
</body>
CSS File
#container
{
/* border: 2px solid black; */
width: 100.6%;
margin: 5px;
white-space: nowrap;
overflow: hidden;
position:relative;
}
#main
{
Position:absolute;
/* border: 2px solid blue; */
float: left;
margin: 3px;
width: 65%;
display: block;
top: 25%;
}
#main.welcome
{
test-align: center;
}
#main.welcome h2
{
width: 58%;
margin: 0 auto;
text-align: center;
word-break: normal;
word-wrap: break-word;
white-space: pre-line;
/* border: 2px solid red; */
}
#aside-right
{
position:relative;
max-height:200px;
height:200px;
border: 2px solid green;
float: right;
width: 27%;
}
#aside-right img
{
position:relative;
width:100%;
float:right;
}
.please-wait
{
position:absolute;
border:2px solid red;
height: 100%;
width: 100%;
}
.please-wait h3
{
position: relative;
/* border:2px solid blue; */
margin: 15px;
top:30px;
text-align: center;
}
.please-wait img
{
position: relative;
margin: 15px;
text-align: center;
max-width: 20%;
border:2px solid blue;
}
Can you please help me to center it and make it at the bottom of .please-wait
JSFiddle
Can you please help me to center it and make it at the bottom of .please-wait
CSS3 Flex can be good idea for manipulate image and flexible layout....
html,
body {
height: 100%;
margin: 0;
}
.main {
height: 100%;
border: 1px dotted blue;
position: relative;
min-height: 500px;
}
.container {
height: 100%;
padding: 0 20px;
}
.image {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.image img {
align-self: flex-end;
}
<div class="main">
<div class="container">
<div class="image">
<img src="http://unsplash.it/300/220?random">
</div>
</div>
</div>
Use this fiddle
Added another class for panel image and this...
.please-wait img {
position: relative;
margin: 15px;
text-align: center;
padding: 0 50px;
margin-top: 110px;
padding-bottom: 0;
border: 2px solid blue;
}
I am using display: table-cell so that I can easily do height:100% the child elements inside to get 100% height.
The problem is that when I have multiple elements inside or padding or margins, the parent does not stretch and instead the contents poke through. Putting a overflow: hidden will not work as I need the children to fit inside the parent properly.
Mark up:
<div class="container">
<div class="subcontainer">
<h4>title</h4>
<div class="menu">
<p>test</p>
<p>test</p>
</div>
<div class="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
CSS:
p{
padding:0;
margin:0;
}
html{
height: 100%;
overflow-y: scroll;
background: white;
}
body{
height: 100%;
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
background: blue;
margin: 0;
border-bottom: 1px solid black;
margin-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
display: inline-block;
float:left;
width: 200px;
padding: 20px;
}
.content{
background: purple;
width: 400px;
}
Fiddle: http://jsfiddle.net/ZQFrM/
The poking through is due to increased height inside caused by the following:
The existence of the h4 on top of the other elements.
Padding and margin on h4.
Padding on menu and content.
What can be done to resolve this problem? I definitely want to use the display: table-cell as I need the children to be able to stretch vertically to fill the parent.
you have to remove the float:left and display:inline-block from '.menu, .content' also you have to apply a display:table-cell. So both div can be align horizontally.
Here is the Code http://jsfiddle.net/kheema/ZBLY7/7/
Here is the CSS..
p{
padding:0;
padding:0;
}
body{
margin: 0;
padding: 0;
background: red;
}
.container{
height: 100%;
display: table;
margin: 0;
padding: 0;
}
.subcontainer{
display: table-cell !important;
height: 100%;
}
h4{
padding: 0;
padding-bottom: 5px;
}
.menu, .content{
background: green;
height: 100%;
/*display: inline-block;
float:left;*/
display: table-cell;
width: 200px;
}
.content{
background: purple;
width: 400px;
}
This is my mockup:
I want to set divs as in the picture. DIV 1 and DIV 2 contain dynamically generated content and the width is different every time.
Div 1 is floated to the left side and Div 2 is floated to the right side.
My question is: how to position Div 3 to fit it between div 1 and 3?
My code is:
HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
margin-left: 20px;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
and I want to fit center div which now is too wide and moves right div lower than I want.
SOLUTION:
HTML
<div class="dia">
<div class="left">sassssss</div>
<div class="center">ddddddddddddddddddddd dddddddddddddddddddddddddd ddddddddddddddddddddddddddddddddd dddddddddddd</div>
<div class="right">asdasdfgdsgdf</div>
</div>
CSS
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: inherit;
}
.dia .left, .dia .right {
overflow: hidden;
height: 106px;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
}
.dia .center {
height: inherit;
float: left;
}
JQuery
$('.dia .left a:not(:first-child)').css('width',$('.dia a').outerWidth(true)+'px');
$('.dia .center').css('width',$('.dia').width()-$('.dia .left').outerWidth(true)-$('.dia .right').outerWidth(true)+'px');
And Fiddle
Simply float the central div.
For your purpose you case use:
.dia{
float:left//Float container in order to contain nested elements.
}
.dia div{
float:left;
}
Here's a fiddle you can fiddle with
Well I did manage to do this in this fiddle, but it feels a little like a workaround, since you have to be careful with center content. Then again, it works, so you can use it as a placeholder or something until you or someone else comes up with better solution.
CSS:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
}
.dia .center {
overflow:auto;
height: 100px;
background-color: #aaa;
margin-left: 20px;
}
.dia .left {
float: left;
height: 100px;
background-color: #ddd;
}
.dia .right {
position:absolute;
/*.dia padding + border*/
right: 15px;
/*.dia padding + border + (.dia height - this height)/2*/
top: 18px;
height: 100px;
background: rgb(214,214,214);
}
try this.
<!DOCTYPE html>
<html>
<head>
<style>
#main
{
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#panelLeft, #panelRight
{
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
#panelCenter
{
-webkit-flex: 3; /* Safari 6.1+ */
-ms-flex: 3; /* IE 10 */
flex: 3;
}
</style>
</head>
<body>
<div id="main">
<div id="panelLeft" style="background-color:coral;">RED</div>
<div id="panelCenter" style="background-color:lightblue;">BLUE</div>
<div id="panelRight" style="background-color:lightgreen;">Green div with more content.</div>
</div>
</body>
</html>
How about using a table instead?
<table class="dia">
<tbody>
<tr>
<td class="left">sassssss</td>
<td class="center">dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
<td class="right">asdasdfgdsgdf</td>
</tr>
</tbody>
</table>
Then the CSS would be:
.dia {
background: #282828;
padding: 10px;
height: 106px;
border-radius: 5px;
width: 100%;
table-layout: fixed;
}
.dia .center {
margin-left: 20px;
word-wrap: break-word;
}
.dia .left, .dia .right {
overflow: hidden;
}
.dia .left {
float: left;
margin-right: 10px;
}
.dia .right {
float: right;
margin-left: 10px;
background: rgb(214,214,214);
}
http://jsfiddle.net/YvnnW/13/
I have css code to do layout. i have basic header panel, footer, left panel, and center panel. I want to have left panel and center panel automatically stretch to bottom(blue and gray part all the way to black footer). is there any way to do that?
following are my codes.
thank you,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
background-color:purple;
}
.footer {
position: relative;
width: 960px;
margin: 0 auto;
background-color:black;
}
.footer a {
color: #fff;
text-decoration: underline;
border: 0;
}
.footer p {
position: absolute;
left: 0;
bottom: 4px;
width: 960px;
padding: 0;
color: #fff;
font: 0.8em arial,sans-serif;
text-align: center;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
background-color:yellow;
}
.footer, .push {
height: 20px; /* .push must be the same height as .footer */
}
.leftPanel{
width:200px;
background-color:blue;
float:left;
height: 100%;
}
.centerPanel{
width:760px;
background-color:gray;
float:left;
height: 100%;
}
dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div,p,blockquote,fieldset,legend,input,select,textarea
{ margin:0; padding:0 }
<div class="wrapper">
<div class="header">
<h1>header</h1>
</div>
<div class="leftPanel">
leftPanel
</div>
<div class="centerPanel">
center Panel
</div>
<div class="push"></div>
</div>
<div class="footer">
<p>footer</p>
</div>
</body>
This is a very work-aroundish solution, but here it goes: http://jsfiddle.net/Us5Cn/
The only way to get elements to stretch to a percentage portion of the height of the view port is to anchor them to the bottom.
See here for specifics.