I'm trying to put a div next to a fixed div, but what happens instead is the div is put inside the fixed div. How can I make it so that the div is placed next to the fixed div? I know I can use float: right with the div, but is there a way of doing it without using floats, with just inline-block? Here's the jsFiddle.
HTML
<div id='column'>
</div>
<div id='content'>
</div>
CSS
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
}
Since your fixed element is 20% wide, you can use margin-left: 20% to move #content to the right of it.
body {
height: 100%;
}
#column {
display: inline-block;
position: fixed;
width: 20%;
min-height: 100%;
background-color: red;
vertical-align: top;
z-index: -1;
}
#content {
display: inline-block;
background-color: black;
width: 100px;
height: 200px;
margin-left: 20%;
}
<div id='column'>
</div>
<div id='content'>
</div>
Related
I am trying to add padding to my .slotIcon class. My .slots class is the container, witch is inline-block with another div, trying to make both divs side by side (50% width).
This is all under the "work" section.
Now padding doesn't affect the icons, and margins move the entire .slots div.
All I want to do is slightly lower the icon and text, in the .slots div.
https://jsfiddle.net/js1rgh4b/1/
<div class="work" >
<h2>Work</h2>
<div class="slots">
<div class="slotIcon"></div>
<p>Slots</p>
</div><div class="OEA">
<div class="OEAicon"></div>
<p>OEA</p>
</div>
</div>
Css:
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
}
.slotIcon {
width: 150px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
.OEAicon {
width: 200px;
height: 159px;
background-repeat: no-repeat;
background-image: url(http://media.idownloadblog.com/wp-content/uploads/2013/07/Imgur-1.0-for-iOS-app-icon-small.png);
margin-left: auto;
margin-right: auto;
}
https://jsfiddle.net/js1rgh4b/1/
Please Try This,
.slots {
display: inline-block;
width: 50%;
height: 350px;
background-color: #3484ce;
padding-top:60px;
}
.OEA {
display: inline-block;
width: 50%;
height: 350px;
background-color: green;
padding-top:60px;
}
You can set padding to .slots and .OEA div ,this will make the text and the icon come down. And instead of display: inline-block , you can use float:left to make the div's align side by side.
DEMO
CSS:
.slots {
float:left;
width: 50%;
height: 350px;
background-color: #3484ce;
padding:60px;
}
.OEA {
float:left;
padding:60px;
width: 50%;
height: 350px;
background-color: green;
}
If you give a padding to .slots, it works. You would need to do the same for .OEAicon if you want them to be similar. If not, then do vertical-align: top; in .OEA.
I have the following image in a div
<div id="left-control">
<img src="img/icons/ic_next_3x_re.png" />
</div>
Here is the css
#left-control {
height: 100%;
float: left;
}
#left-control > img {
display: block;
margin: 250px 0;
z-index: 1;
}
But for some reason I can't seem to vertically center the image no matter what CSS I try. Any suggestions?
There isn't an amazing way to accomplish this, but what is below should do the trick.
#left-control {
float: left;
height: 100%;
}
#left-control:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#left-control img {
vertical-align: middle;
z-index: 1;
}
Here is a simple fiddle. Keep in mind that I manually set the height for the #left-control element in this example since fiddle wasn't allowing for 100%.
You can use CSS tables to accomplish this.
.wrapper {
display: table;
height: 300px;
border: 1px solid black;
}
#left-control {
height: 100%;
display: table-cell;
vertical-align: middle;
}
#left-control > .img {
display: inline-block;
width: 100px;
height: 100px;
z-index: 1;
background: red;
}
<div class="wrapper">
<div id="left-control">
<div class="img"></div>
</div>
</div>
you could wrap the img, inside another div like so..
<div id="left-control">
<div class="vert-align">
<img src="img/icons/ic_next_3x_re.png" />
</div>
</div>
then, in the css do something like this...
#left-control {
height: 100%;
position:relative;
}
#left-control > img {
display: block;
margin: 250px 0;
z-index: 1;
}
.vert-align{
position: absolute:
margin: auto:
top:0; left:0; right:0; bottom:0;
height: 100px;
}
you can play with top left right and bottom properties to set it to the desired position.
Goal: In the content area of a site, I need to make a decorative-only column that spans the height of two divs (containing images) beside it.
Problem: the column either has no height, regardless which attributes I give it, or only has the height of the first sibling div and no fill. I have tried height: 100%, min-height: 100%. Also tried making parent position: absolute and setting top: 0 and bottom: 0.
the code:
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
#B1 {
float: left;
width: 84%;
height: 100px; /* this will actually be the height of the img */
background-color: green;
}
#B2 {
width: 84%;
height: 100px; /* this will actually be the height of the img */
float: left;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
Thanks in advance for your help.
what I want: http://i.stack.imgur.com/sgr5g.png
What I get: http://i.stack.imgur.com/lS63m.png
You should change the left column to position: absolute.
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
}
#colLeft {
float: left;
width: 20%;
position: absolute;
height: 100%;
background-color: red;
}
#B1 {
float: right;
width: 80%;
height: 100px;
background-color: green;
}
#B2 {
width: 80%;
height: 100px;
float: right;
background-color: #ff0;
}
<div class="row">
<div id="colLeft"></div>
<div id="B1">
<img src="foo">
</div>
<div id="B2">
<img src="bar">
</div>
</div>
In your code you have height: 100px; /* this will actually be the height of the img */ for both img in your .row
You can do it like this also, fiddle http://jsfiddle.net/DIRTY_SMITH/QwZuf/260/
in this example I set the height of 200px to the row and height of 100% to the column
.row {
position: relative;
overflow: hidden;
border: #000 3px dashed;
height: 200px;
}
#colLeft {
float: left;
width: 15%;
height: 100%;
background-color: red;
}
Here's an alternate solution I found that works very well, too.
.row {
display: table-row;
}
#colLeft {
display: table-cell;
width: 15%;
background-color: red;
}
#B1 {
display: table-cell;
width: 84%;
height: auto;
background-color: green;
}
#B2 {
display: table-cell;
width: 84%;
height: auto;
background-color: #ff0;
}
I am trying to center one div element and make others float to the left from him like this:
In this code width and height is set to px but in my its in %. So I don't know where the center is. So it has to change with different resolution.
I don't want to put it in another div and center that because it center both divs and I want only yellow to be in center.
Is there any solution besides putting another empty div on the left side with same height as green has and making him invisible?
.container{
background-color:#34495e;
width: 500px;
height: 200px;
padding: 10px;
}
.in-center{
background-color:#f1c40f;
width: 40%;
height: 100%;
display: inline-block;
}
.to-left{
background-color:#2ecc71;
width: 20%;
height: 100%;
display: inline-block;
}
<div class="container">
<div class="in-center"></div>
<div class="to-left"></div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
background-color: #34495e;
width: 80%;
height: 200px;
text-align: center;
position: relative;
}
.in-center {
background-color: #f1c40f;
width: 40%;
height: 100%;
display: inline-block;
}
.to-left {
background-color: #2ecc71;
width: 20%;
height: 100%;
display: inline-block;
position: absolute;
}
<div class="container">
<div class="in-center"></div>
<div class="to-left"></div>
</div>
I have a problem. I want to achieve something like this:
I have a div with fixed height, and 2 other divs inside, with variable / unknown height, which I want to have
a) vertically centered
b) floating left /right
Right now I am trying something like this.
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
Everything is perfectly centered, but the right div is next to the left one, and not on the right side. As soon as I start to put in
float: right;
into my right class, it is on the right side, but not centered anymore. And I have no clue how to achieve this.
Thank you in advance!
There is a really cleaver answer to this at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ It suggests this code:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
There are other solutions to this problem also, but this is the most simple. You can then just float each box left or right.
EDIT: another link with a lot of ways of doing this http://css-tricks.com/centering-css-complete-guide/
Try using Flexbox, e.g.
.wrapper {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
.left {
display: inline-block;
vertical-align: middle;
background: red;
}
.right {
vertical-align: middle;
background: green;
}
http://jsfiddle.net/hafpuvtq/
More info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to set the html, body elements of height: 100% and margin and padding of 0 outside the container class first before declaring any of the following classes:
HTML
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
top: 50%;
height: 100px;
}
.box1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.box2 {
height: 100px;
width: 100px;
background-color: green;
float: right;
}
The left and right both have to contain floats; left box for float: left; and right box for float: right;
That's right - floating an element removes it from the document flow, so it can't align itself to its parent element's line-height. Instead, put a wrapper div around each of the two child elements, and float the wrappers, left and right respectively. Make sure their height is 100%, and then vertically align the children inside them, as you currently are.
See http://jsfiddle.net/conLs2fd/6/.
this answer is just css
.wrapper {
position: relative;
height: 200px;
border: 1px solid gray;
}
.left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
display:inline-block;
}
.right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
margin: auto;
background-color: gray;
display:inline-block;
}
<div class="wrapper">
<div class="left child">This is left</div>
<div class="right child">This should be right</div>
</div>
Here is one way of doing it that involves using text-align: justify on the .wrapper parent block. If you can specify the height of .wrapper, you
can set line-height to the same value of the height.
Add a :after pseudo-element of height: 0 to force a second line for the line box containing the elements, which will allow the justification to work.
.wrapper {
border: 1px dotted gray;
height: 100px; /* for demo only */
line-height: 100px;
text-align: justify;
}
.wrapper:after {
content: '';
display: inline-block;
height: 0;
width: 100%;
}
.left, .right {
border: 1px dotted blue;
line-height: 1.2;
}
.left {
display: inline-block;
vertical-align: middle;
}
.right {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="left">This is left</div>
<div class="right">This should be right</div>
</div>