I'd live to position two divs in a container right next to each other which occupy 100% of the container together with a fixed amount of padding between the two. Is it possible to do so without knowing the width of either divs or using percentages. Hopefully this sample code will give some idea on what I'm trying to achieve.
http://jsfiddle.net/C2uTA/
.orange {
position:absolute;
top:0;
width:45%;
background-color:orange;
}
.yellow {
width:auto;
background-color:yellow;
}
<!--sample html-->
<div style="position:relative;width:100%">
<div class="orange">Orange Div</div>
<div class="yellow">I want this div to start 10px to the right of the orange div</div>
</div>
Try adding this to .yellow:
.yellow {
position: absolute;
right: 0;
top: 0;
width: 45%
You can simply play with percentages until you're satisfied with the space between the two.
Try using float:left; margin-right:(according to your convenience in your page) in the class for yellow to place the orange and yellow next to each other in the container.
And as Davion said, you play with percentages and then you will get your spaces perfectly.
Try using following css code:
.orange {
background-color:orange;
position: absolute;
top: 0;
left: 0;
right: 50%;
}
.yellow {
position: relative;
left: 50%;
top: 0;
background-color:yellow;
width: 48%;
margin-left: 2%;
}
Hope it should help you in achieving your purpose.
Related
Here is example demo of my problem
http://www.bootply.com/tkrs6G3GlG
Basicly, I've got on the left form groups, and in each I've got large text giving some information and then asking user to select something (in example is only radio, but there are dropdown's and checkboxes as well). I would like that for every form group, options on the right are vertically align (in the middle) depending on text size. In example above, radio's are on top, but I would like them in the middle of corresponding form-group.
I've tried
.vcenter{vertical-align:middle;
}
but it's not working. I've also tried setting height of div which contains options
.maxHeight{
height:100%;
}
but div is not getting larger. I tried using large height and hide overflow, but not working.
Only thing that worked so far is using
.vcenter{
position:absolute;
vertical-align: middle;
}
but it only looks well on large screen, but after screen resizing, it's overlaping with text.
If your div is inside another div,try
#my_div{
margin-left: auto;
margin-right: auto;
width: /*put_your_width*/;
}
And if it is the parent div
#my_div{
display: table;
margin-right: auto;
margin-left: auto;
}
There are a few ways to do this. I usually use this method...
HTML
<div> <p>Center this text</p> </div>
CSS
div{
position: relative;
height: 500px;
width: 500px;
background: green;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
p{
position: absolute;
top:50%;
text-align:center;
display:inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
The way I prefer to do it is add margin: auto; and top, left, right, and bottom 0 like so:
.parent {
position: relative;
}
.child {
margin: auto;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
you can use many aproaches.
first one is with position
.parent_div{
position:relative;
width:500px;
height:500px;
}
.children_div{
position:absolute;
width:100px;
height:100px;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
-But you need to have specified the height and width of the child element.. so it is not good for fluid design.
Sec. aproach is the best i think it uses display :)
.parent_div{
display:table;
width:500px;
height:500px;
text-align:center;
}
.children_div{
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
}
.children_children_div{
/*What ever... this div will be centered verticaly*/
}
I finally got the problem where my search-fu is not enough. I made some gallery carousel with fixed height and width with image list inside (displaying one li at time). Images are positioned absolute (with margin:auto etc) inside relative li element.
Images often are larger than its container which has overflow:hidden. Images have max-width:100% It creates a desired effect that smaller images are centered within container and larger (higher) are cropped which can be opened for full version.
.gallery-items>li {
padding:0;
margin:0;
width:100%;
height:100%;
text-align:center;
position:relative;
overflow:hidden;
}
.gallery-items>li img {
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:100%;
max-height:none;
height:auto;
width:auto;
position:absolute;
}
fiddle here http://jsfiddle.net/fW63c/1/
It works great (center of the image is in the center of container) in IE8, IE9, Opera 12/15, Chrome but in Firefox the larger images start with the beginning of the container (like it would have top:0. Does anyone have any idea how to make it work in FF (preferably just using css) . Thanks in advance for any solution, Fafel
Best way to do it if you don't have to support IE8 or older is to translate the image vertically. This method works in all major browsers, including IE9+:
img {
top: 50%;
transform: translateY(-50%);
}
https://jsfiddle.net/6n2vu7zd/1/
This one has been troubling me quite a bit, but eventually I found that setting top: -100%; and bottom: -100%; will have the desired effect.
Normally the following will work just fine:
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But in Firefox, if the parent is not as tall as the child it will simply decide to align them at the top. But this will work:
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
I created a demo to demonstrate:
There are two examples, the first will be wrong in Firefox but both will look fine in Chrome, Edge, and IE.
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.child2 {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto;
}
.parent {
margin: 30px;
position: relative;
display: inline-block;
width: 100px;
height: 25px;
background-color: yellow;
}
<div class="parent">
<img width="75" heigh="75" class="child" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="parent">
<img width="75" heigh="75" class="child2" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
The structure of my html is
<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>
What I want to do is give a fixed height to the divHeader, let's say 100px, and let the divBody expand to the end of the page exactly, without scroll bars for the browser.
So, if the user's window is 1000px, the body will be 900px and etc...
If i set the divBody height to 100%, it will take the 100% of the body, which means will create a scroll bar in the page.
Thanks in advance,
You could use absolute positioning: FIDDLE: http://jsfiddle.net/Z4vNN/2/
.divHead {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: red;
}
.divBody {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background-color: green;
overflow: auto;
}
.divBody {
height: calc(100% - 100px);
}
#crush is certainly right, but if absolute positioning messes up other page elements you can avoid it by just having the elements displayed as blocks : http://jsfiddle.net/kF5wQ/
#header {
height:100px;
width:100%;
background:red;
display:block;
}
#container {
height:100%;
width:100%;
background:blue;
display:block;
overflow:visible;
}
Hey, I am guessing that this is probably fairly trivial, but I am having difficulty finding an answer or figuring it out nonetheless.
I'm trying to create a grid of colored squares with arbitrary spacing between them.
This in itself is easy to do, especially because I need only nine squares. But while
I look at my completed code, I cannot help but feel there is a far more simple and efficient way to accomplish this.
At the moment, I have nine different IDs declared in my css, one for each square.
div.container{
position:relative;
left:50px;
top:50px;
background-color:rgb(45,45,45);
height:300px;
width:300px;
}
#square{
position:absolute;
background-color:rgb(52,82,222);
left:20px;
top:20px;
height:80px
width:80px
#square2{
position:absolute;
background-color:rgb(58,82,22);
left:110px;
top:20px;
height:80px;
width:80px;
etc etc etc
What I would like to do is find a more efficient way to do this.
Thanks for the help!
You can use a class for the squares that share a property:
.square {
position: absolute;
width: 80px;
height: 80px;
}
Is there a specific reason you're absolutely positioning them though? Sounds like a job better suited for floats.
div.container {
width: 240px;
}
.square {
float: left;
width: 80px;
height: 80px;
}
Assuming that the inner squares are divs, there are no other divs inside your container, and each inner div should be the same width and height, this is what I'd do:
.container {
position: relative;
left: 50px;
top: 50px;
background: rgb(45,45,45);
height: 300px;
width: 300px;
}
.container > div {
position: absolute;
background-color: rgb(52,82,222);
height: 80px;
width: 80px;
}
#square1 {
left: 20px;
top: 20px;
}
#square2 {
left: 110px;
top: 20px;
}
..
If you need separate top and left properties for each div, then you have no choice but to use ids.
You can avoid having to add a class thanks to using .container > div, which selects all div elements that are direct children of .container.
The HTML would look like this:
<div class="container">
<div id="square1"></div>
<div id="square2"></div>
..
</div>
Why not give all of the squares the same class and apply something like
.square
{
display: inline-block;
width: 80px;
height: 80px;
zoom: 1;
*display: inline /* for IE */
}
That should make all of the blocks wrap nicely without having to add styles for each individual.
Normally, you center images with display: block; margin: auto, but if the image is larger than the container, it overflows to the right. How do I make it overflow to the both sides equally? The width of the container is fixed and known. The width of the image is unknown.
A pure css solution
Requiring one extra wrapper (tested in FireFox, IE8, IE7):
Improved Answer
There was a problem with the original answer (below). If the image is larger than the container that outer is centered on with it's auto margins, then it truncates the image on the left and creates excessive space on the right, as this fiddle shows.
We can resolve that by floating inner right and then centering from the right. This still truncates the img off the page to the left, but it does so by explicitly pushing it that way and then centers back off of that, the combination of which is what prevents the extra horizontal scroll on the right. Now we only get as much right scroll as we need in order to see the right part of the image.
Fiddle Example (Borders in fiddle are for demo only.)
Essential CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
position:relative;
float: right; /* this was added and display removed */
right: 50%;
}
div.inner img {
position: relative;
right:-50%; /* this was changed from "left" in original */
}
If you desire no right scroll at all for wide images
Then using the above, also set whatever element wraps outer (like body or a third wrapper) to have overflow: hidden.
Original Idea (for History)
Fiddle Example (Borders in fiddle are for demo only.)
HTML
<div class="outer">
<div class="inner">
<img src="/yourimage.png">
</div>
</div>
CSS
div.outer {
width: 300px; /* some width amount needed */
margin: 0 auto;
overflow: visible;
}
div.inner {
display: inline-block;
position:relative;
right: -50%;
}
div.inner img {
position: relative;
left:-50%;
}
Here's a 2 line CSS solution (a couple more lines might be required for cross-browser support):
img {
margin-left: 50%;
transform: translateX(-50%);
}
HTML
<div class="image-container">
<img src="http://www.google.com/images/logo.gif" height="100" />
</div>
CSS
.image-container {
width: 150px;
border: solid 1px red;
margin:100px;
}
.image-container img {
border: solid 1px green;
}
jQuery
$(".image-container>img").each(function(i, img) {
$(img).css({
position: "relative",
left: ($(img).parent().width() - $(img).width()) / 2
});
});
See it on jsFiddle: http://jsfiddle.net/4eYX9/30/
Alternative pure CSS solution is to use transform attribute:
HTML:
<div class="outer">
<img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>
CSS:
.outer {
position: relative;
width: 100px;
border: 1px solid black;
height: 150px;
margin-left: 100px; /* for demo */
/* overflow: hidden; */
}
img.image {
width: 200px;
opacity: 0.7;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
Fiddle
Just to add a overflow:hidden to parent div to hide the extra area of the image.
Your best bet is to set it as background image of the container instead.
#container {
background: url('url/to/image.gif') no-repeat center top;
}
In fact there is a simpler pure css/html way (without large horizontal scroll) :
Html :
<div class="outer">
<img src="/my/sample/image.jpg">
</div>
Css :
If you don't want to see image overflow
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: hidden;
position: relative;
height: 200px;
}
With image overflow visible
div.outer img {
position: absolute;
left: -50%;
z-index:-1;
}
div.outer {
overflow: visible;
position: relative;
height: 200px;
}
body, html {
overflow-x:hidden;
}
A background solution with image overflow visible :
Html :
<div class="outer">
<div class="inner"></div>
</div>
Css :
div.outer {
width: 100%;
height: 200px;
}
div.inner {
background: url('/assets/layout/bg.jpg') center no-repeat;
position: absolute;
left: 0;
width: 100%;
height: inherit;
}
assuming outer is in a width specified container.
I see this is an old post, so maybe everybody knows this by now, but I needed help for this and I solved it using flex:
.parent {
display: flex;
/* give it the width and height you like */
}
.parent img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
I can only think of a Javascript solution since what you need to do is relatively position the image a negative amount to the left of its container:
jQuery
$(document).ready(function(){
var theImg = $('#container img');
var theContainer = $('#container');
if(theImg.width() > theContainer.width()){
theImg.css({
position: 'relative',
left: (theContainer.width() - theImg.width()) / 2
})
}
})
I found this to be a more elegant solution, without flex, similar to something above, but more generalized (applies on both vertical and horizontal):
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
I don't think there is a pure CSS solution (Except for the next answer :)). However with Javascript it would be just a matter of finding the width of the image, subtracting the container width, dividing by two and you have how far to the left of the container you need.