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.
Related
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>
So I am creating a responsive website using HTML and CSS, and I have created four div elements in a container width of 50%, each of these elements are 25% width and 25% height. Making a square. Next to these four div's is another div, 50% in width. When I try to get the two containers to go side side, they appear incorrect. The image below will demonstrate this clearly.
What I am trying to achieve.
Any help would be greatly appreciated!
HTML Code
<div id="tile-1-small-left-1">
</div>
<div id="tile-1-small-left-2">
</div>
<div id="tile-1-small-left-3">
</div>
<div id="tile-1-small-left-4">
</div>
<div id="tile-1-small-right">
</div>
The CSS code:
#tile-1-small-left-1 {
width: 25%;
height: 25%;
background-color: red;
display: block;
float: left;
}
#tile-1-small-left-2 {
width: 25%;
height: 25%;
background-color: green;
display: block;
float: left;
}
#tile-1-small-left-3 {
width: 25%;
height: 25%;
background-color: yellow;
display: block;
float: left;
clear: left;
}
#tile-1-small-left-4 {
width: 25%;
height: 25%;
background-color: blue;
display: block;
float: left;
}
#tile-1-small-right{
/*background-image: url(../img/hero_rotation.jpg);*/
background-color: purple;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 50%;
float: right;
height: 45%;
}
Fiddle demo
As I mentioned, this usually calls for another level of structure. This would do, based on your original CSS:
html,
body {
height: 100%;
}
#tile-1-small-left-1 {
width: 50%;
height: 50%;
background-color: red;
display: block;
float: left;
}
#tile-1-small-left-2 {
width: 50%;
height: 50%;
background-color: green;
display: block;
float: left;
}
#tile-1-small-left-3 {
width: 50%;
height: 50%;
background-color: yellow;
display: block;
float: left;
clear: left;
}
#tile-1-small-left-4 {
width: 50%;
height: 50%;
background-color: blue;
display: block;
float: left;
}
.tile-1-small-right {
/*background-image: url(../img/hero_rotation.jpg);*/
background-color: purple;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 50%;
float: right;
height: 45%;
}
<div class="tile-1-small-right">
</div>
<div class="tile-1-small-right">
<div id="tile-1-small-left-1">
</div>
<div id="tile-1-small-left-2">
</div>
<div id="tile-1-small-left-3">
</div>
<div id="tile-1-small-left-4">
</div>
</div>
What I've done is wrapped the four smaller elements in another instance of the larger element (which required changing your selector to a class rather than an ID).
This case also demonstrates why ID-based selectors are a bad idea, and why semantic class names should be used. Calling something -left becomes confusing as soon as that type of element gets used elsewhere in the page.
For the first image example, just add <div style="clear:both"></div>
<div id="tile-1-small-left-4"></div>
<div style="clear:both"></div>
<div id="tile-1-small-right"></div>
I have a responsive design with a header image which is placed in a container. The image has width:100%; and height:auto; so it grows as you enlarge the viewport. I don't want to exceed a certain height so the container has a max-height. The image still grows but now the bottom part is cut off now because it aligns to the top of the container.
I would like the image to stay vertically centered in it's container so that parts of the image are cut off at the top and at the bottom. The outcome should look like this:
The header images are uploaded by users so they might have different heights therefore I cannot work with specific pixel-values. Is there a CSS-solution for this or do I have to use JavaScript?
Here is the code:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
}
.container {
text-align: center;
height: auto;
line-height: 200px;
max-height: 200px;
overflow: hidden;
}
img {
width: 100%;
height: auto !important;
vertical-align: middle;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
And I prepared a fiddle.
You can use absolute positioning for your image , negative top/bottom values and margin:auto; to verticaly center the image in the container :
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
background-color: #E9ADAD;
max-height: 200px;
}
.container {
position:relative;
padding-bottom:40%;
overflow: hidden;
}
img {
position:absolute;
top:-50%; bottom:-50%;
margin:auto;
width: 100%;
height: auto;
}
<div class="wrapper">
<div class="container">
<img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
</div>
</div>
Not so long ago there was only a javascript way to do this but now we have some css rules: object-fit and object-position
They work just like the background-size rules cover and contain:
.container img{
width: 100%;
height: auto;
}
#supports(object-fit: cover){
.container img{
height: 100%;
object-fit: cover;
object-position: center center;
}
}
The problem with this approach is that is very new and doesn't work on ie or Edge yet.
Pen here: http://codepen.io/vandervals/pen/MwKKrm
EDIT: Please, see that you need to declare the width and the height of the image, or it won't work.
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
height: 200px;
overflow: hidden;
}
.imgWrapper {
position: relative;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: auto;
width: 50%;
}
<div class="wrapper">
<div class="container">
<div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
</div>
</div>
http://jsfiddle.net/ghygpw8t/5/
inspired by: https://css-tricks.com/perfect-full-page-background-image/
Try like this: Demo
If image size is small it will be arranged in vertical middle and if its big, it will fit in box.
CSS:
.wrapper {
width: 90%;
max-width: 600px;
margin: 1em auto;
}
.container {
text-align: center;
line-height: 200px;
overflow: hidden;
background-color:#ccc;
vertical-align:middle;
height: 200px;
border:2px solid green;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
img {
width: 100%;
max-height: 196px;
border:2px solid red;
vertical-align: middle;
line-height: 196px;
}
Hope this is what you want!
On the element you want centered.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
on its parent.
.parent { transform-style: preserve-3d; }
Use a polyfill to render cross browser styles.
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
How do I horizontally center a fixed-width div within a percentage-width div?
For example in this fiddle, I'd like the Google logo centered.
<div class="box">
<div class="image">
<img src="http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png" />
</div>
<div class="text">Hello</div>
</div>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
}
http://jsfiddle.net/FloatLeft/g2u4E/
I've looked at various 'solutions' online and I haven't found anything that worked.
you can center the logo easy by setting background image for the div and change the background size as you need :
.box .image {
height: 160px;
width:400px;
background-color:#ff1769;
background-image: url('http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png');
background-size:47% 100%;
}
see FIDDLE
I would do this:
.box .image {
height: 160px;
width: 100%;
background-color:#ff1769;
background-position:center center;
}
Add the image as a background image.
http://jsfiddle.net/g2u4E/5/
<style>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
margin:auto;
}
.box .image img{
height: 100%;
width: 100%;
}
</style>
A div with fixed or % width can be aligned to center of its parent container by applying
margin:0 auto;
For Eg:
#divToCenter{
height: 160px;
width: 400px;
margin:0 auto;
}