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>
Related
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target รท context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
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>
I am wondering how to position a div relative to a fixed position div within the same parent div. Here is my html structure:
<div class="container">
<header class="site-header>
</header>
<div class="site-page">
</div>
</div>
Here is my css:
div.container {
max-width: 100vw;
height: 100%;
margin: 0 auto;
padding: 0 auto;
}
.site-page {
display: inline-block;
float: right;
width: 80%;
height: 100%;
}
.site-header {
width: 80%;
text-align: right;
position: fixed;
right: 0;
float: right;
}
So, how would I make the .site-page class relative to the bottom of the .site-header class?
Just add margin-top or padding-top the amount of height of the fixed element. I have used padding instead of margin, because the height increase on the div can be countered with border-box.
Or if you choose to do it with margin, then use height: calc(100% - AmountOfHeader).
Also, there is no such thing as padding: auto, it's either 0 or a positive value.
https://jsfiddle.net/8evLtbgr/
div.container {
max-width: 100vw;
height: 100%;
margin: 0 auto;
padding: 0;
color: white;
}
.site-header {
width: 80%;
text-align: right;
position: fixed;
right: 0;
float: right;
height: 100px;
background-color: blue;
}
.site-page {
display: inline-block;
float: right;
width: 80%;
height: 100%;
padding-top: 100px; /* height of header */
background-color: green;
}
/***********/
body { height: 100vh; width: 100vw; margin: 0; } /*need this, because page is empty*/
*, ::before, ::after {
box-sizing: border-box; /* padding and border won't increase size of the elements, namely .site-page */
}
<div class="container">
<header class="site-header">site-header</header>
<div class="site-page">site-page</div>
</div>
There are two divs. I want the inner div to be vertically centered, without giving margins, as I want height of inner div to be auto, because its content can change and height can increase.
Here are the two divs:
Outer div:
.frontleft{
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
}
Inner div:
.c1{
height: auto;
width: inherit;
}
Thanks.
You can use Flexbox. display: flex on parent and align-self: center on the child item will center it vertically.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
background: #2C2955;
display: flex;
}
.c1 {
height: auto;
width: inherit;
background: #4C5FB1;
align-self: center;
}
<div class="frontleft">
<div class="c1">Center</div>
</div>
Why don't you use a table instead? With vertical-align in td tag.
<html>
<body>
<table class="frontleft">
<tr><td>I am a sentence</td></tr>
</table>
</body>
</html>
You should position inner element absolute and use transform property for vertical centering.
.frontleft {
width: 602px;
height: 450px;
float: left;
margin: 35px auto;
z-index: 10;
position: relative;
background: orange;
}
.c1 {
height: auto;
width: inherit;
position: absolute;
top: 50%;
transform: translateY(-50%);
background: blue;
}
<div class="frontleft">
<div class="c1">test</div>
</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.