I have a parent with a fixed width
.parent {
width: 800px;
height: 400px;
display: block;
}
I'm trying to center a child inside of it that has a dynamic width, based on the width of an image. I don't want the child div to have any background color (so just be as big as the image)
.child {
background: red;
//how to center?
}
.image-container {
max-height: 253px;
overflow: hidden;
padding: 0;
}
.image-container img {
max-width: 100%;
}
How can I center the div?
JSFiddle
Use text-align: center and remove the position: absolute from child class.
Fiddle
.parent {
width: 800px;
height: 400px;
display: block;
background: blue;
position: absolute;
text-align: center;
}
.child {
margin-left: auto;
margin-right: auto;
}
Set .child to:
.child {
display: block;
margin: 0 auto;
width: 200px;
}
http://jsfiddle.net/YjwCq/4/
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>
I have three elements:
.main
> .img-container
>> img
.main has a definite height,
.img-container has a max height equal to the container,
img should take up the containing div's height.
The problem is that the image is not constrained to the container's height,
as shown in this fiddle.
Please note that the image has to be limited to the container's height, not only making it vertically middle.
Thanks for your help.
Here is the current scss:
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
Use height in .main .img-container class
DEMO
.main .img-container {
background-color: #ddd;
/*max-height: 100%;*/
height: 100%;
width: 80%;
}
Try this. Worked for me.
I have changed the max-height of image-container and height of img.
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: inherit;
width: 80%; /* just to show the main container */
img {
height: inherit;
}
}
}
may be you want this
.main {
height: 200px;
background-color: #eee;
text-align:center;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
i have replaced max-height with height and added text-align to center in main container. if you don't need image at center then remove text-align:center
Here is the solution.It's working for me
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%;
img {
height: 100%;
}
}
}
I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be responsive. Currently, only the max-width on the centered one works.
See this jsFiddle.
How do I make the right div responsive too?
HTML:
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
CSS:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 100%;
max-width:300px;
height:300px;
display: inline-block;
vertical-align: top;
}
#right {
background:yellow;
width:100%;
max-width:300px;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
}
The idea is to use flexbox. And add a pseudo element for left column, in order to make the middle one in the center with your existing markup.
JSFiddle Demo
#container {
display: flex;
}
#container:before, #middle, #right {
border: 1px solid red;
flex: 1 1 0;
}
#container:before {
content:"";
}
#middle {
max-width: 100px;
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Responsive</div>
</div>
You can accomplish what you want by doing something like this: JSFiddle
Only problem is your middle div has to have a fixed width but using media queries you can forget about that. Keep in mind that calc browser support could be better (although there are polyfills).
#middle {
position: relative;
margin: 0 auto;
height: 300px;
width: 340px;
background: #ddd;
text-align: center;
}
#right {
position: absolute;
top: 0; right: 0;
width: calc(50% - 170px);
background: red;
}
#media screen and (max-width: 340px) {
#middle {
width: auto;
max-width: 340px;
}
#right {
display: none;
}
}
BEFORE EDIT
max-width is not working on elements where position is set to absolute.
What exactly do you want do accomplish with absolute and also, what kind of layout do you want to get in the end?
remove the max-width from right div. also you have to set a percent less than 100% but totally 100% to make sense to responsive divs:
#container {
width: 100%;
text-align: center;
position: relative;
}
#middle {
background: #ddd;
margin: 0 auto;
position: relative;
width: 80%;
max-width: 300px;
height: 300px;
display: inline-block;
vertical-align: top;
}
#right {
background: yellow;
width: 20%;
display: inline-block;
vertical-align: top;
position: absolute;
}
#media screen and (max-width: 350px) {
#right {
display: none;
}
#middle {
width: 100%;
}
}
<div id="container">
<div id="middle">Centered</div>
<div id="right">Make me responsive</div>
</div>
I want the blue div (as shown in the fiddle below) to be to the right of the red div. Instead it's below. If I set parent to overflow: hidden, it's still below and just hides it.
EDIT: In simplifying my code, I left out the display: table on my text div. I have added that in here: http://jsfiddle.net/z1385n05/3/
http://jsfiddle.net/z1385n05/
http://jsfiddle.net/z1385n05/1/ (with overflow: hidden)
HTML:
<div class="outer">
<div class="parent">
<div class="child1">1</div>
<div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
</div>
</div>
CSS:
.outer
{
position: relative;
width: 320px;
height: 480px;
border: solid 1px #cccccc;
}
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
}
.child1
{
position: relative;
width: 30px;
height: 100%;
float: left;
background-color: red;
}
.child2
{
position: relative;
height: 100%;
float: left;
background-color: blue;
white-space: nowrap;
overflow: hidden;
display: table;
}
.child span
{
position: relative;
width: 100%;
vertical-align: bottom;
display: table-cell;
}
After your updated question you can achieve this if you set parent display:table and .child2 display:table-cell
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: hidden;
display:table;/*Add this*/
}
.child2
{
position: relative;
height: 100%;
background-color: blue;
white-space: nowrap;
display: table-cell;/*Add this*/
overflow: hidden;
}
fiddle
The reason why the blue box is floating below the red box is because there is not enough horizontal space for them to be side by side.
To solve this there are 2 solutions:
1) increase the width of .outer until the boxes are side by side
For example:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Or
2) increase the width of .parent until the boxes are side by side
For example:
.parent
{
position: absolute;
top: 100px;
left: 150px;
height: 20px;
overflow: visible;
width: 620px;
}
Your outer div is too small to accomodate text without wrapping.
Try this, increase width, tested on jsfiddle you posted:
.outer
{
position: relative;
width: 620px;
height: 480px;
border: solid 1px #cccccc;
}
Cheers !!
I looked through many posts and still can't get this one to work...
My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".
The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc
Please let me know if you need more clarification. Thanks in advance!
http://jsfiddle.net/pn9Qa/
HTML
<div class='container'>
<div class='top'>some text</div>
<div class='bottom'>
<div class='one'>header</div>
<div class='two'>items here</div>
</div>
</div>
CSS
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
}
.top
{
height: 60px;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
Here's one using calc():
width: -webkit-calc(100% - 60px); /* note, the space is necessary */
Here's one using display: flex
display: -webkit-flex;
-webkit-flex-direction: column;
Here's one using padding/margins and z-index:
box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;
Then, the old, do some math yourself version.
Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.
Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
overflow: hidden;
}
Do you need this: http://jsfiddle.net/pn9Qa/1/
html, body { height: 100%; }
.container
{
height: 100%;
width: 100%;
border: 3px solid red;
}
.top
{
height: 100%;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}