I have three images vertically aligned inside of a div. When the browser shrinks the third image no longer fits within the div causing that image to drop down to the second line. I used auto and 100% width and height properties in CSS but it doesn't keep the images inline nor resize the image. Anyone know how to fix this?
<div class="media">
<img class="media_image" src="source1_name">
<p>Some text that overlays the image</p>
</div>
<div class="media">
<img class="media_image" src="source2_name">
<p>Some text that overlays the image</p>
</div>
<div class="media">
<img class="media_image" src="source3_name">
<p>Some text that overlays the image</p>
</div>
.media {
display: inline-block;
position: relative;
vertical-align: top;
margin-left: 16px;
}
.media img {
width: auto;
height: auto;
}
.media_image {
display: block;
}
Try this:
.media {
box-sizing: border-box;
display: inline-block;
position: relative;
vertical-align: top;
width: 33,33%;
margin-left: 16px;
}
.media img {
width: 100%;
height: auto;
}
.media p {
position: absolute;
left: 0;
bottom: 20px;
}
It sets the element widths to one third of the parent (the body?) and the image widths to the full width of these three elements, which will both change when the parent container shrinks on smaller screens (given that is has for example 100% width)
Of the last rule, mainly the absolute position is important in order to overlay the images, the rest/the actual position is up to you.
Related
I'm trying to do something that doesn't seem to have been asked. I have a jsfiddle:
http://jsfiddle.net/kahanu/zo7yj3s0/4/
I have two floated divs side-by-side, the left div has content that creates height of the parent div. The right div will simply have buttons that need to be vertically centered in whatever height the left div creates. So there are no known dimensions, either height or width.
Here's what I have:
<div class="parent">
<div class="line">
<div class="left">
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
</div>
<div class="right">
<button>Center me vertically</button>
</div>
</div>
</div>
And this is the CSS:
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
height: 10%;
width: 100%;
background-color: grey;
font-size: 1.6em;
display: table;
}
.line {
display: table-cell;
vertical-align: middle;
background: blue;
}
.left {
float: left;
width: 50%;
background-color: yellow;
}
.right {
float: right;
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
}
I feel like I'm close, I'm just missing an important concept.
So how can I vertically center the button in the right-hand div?
Vertical align only applies to inline or inline-block elements. It affects the
alignment of the element itself, not its contents (except when applied
to table cells) When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
Read more on this here: http://www.impressivewebs.com/css-vertical-align/
What you can apply this CSS to your button.
button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you're into using mixins you can simply write a vertical alignment rule and reuse throughout your project.
Mixin:
#mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
CSS:
button {
#include vertical-align();
}
CODEPEN DEMO
Instead of floating the divs you could set their display to table-cell instead:
.left {
display:table-cell;
width: 50%;
background-color: yellow;
}
.right {
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
display:table-cell;
}
jsFiddle example
I'm trying to create a list of items where each item in the list contains essentially two columns ... the left column some text, and the right column 2 buttons for yes/no. I want the two buttons on the right to be vertically aligned with the text. For aesthetic reasons, I want a min-height on the list item. I finally figured out that a floating div must be inside an absolute div for the 100% height to work. The problem is now that I have an absolute div inside my original relative div, it no longer expands to accommodate text longer than min-height. I've read so many articles and tried so many different combinations of height/relative/absolute/float/clear/overflow and nothing has worked for my situation. Is there a solution to this?
In my example here http://jsfiddle.net/THBFY/4/ I need the red box to be the same height as the blue box so that the vertical align works.
<div class="list_container">
<div class="list_item">
<div class="item_text">
My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
.list_container { position: relative; width: 400px; }
.list_item { position: relative; min-height: 70px; overflow: hidden; border: #000000 solid 1px; }
.item_text { float: left; width: 340px; background-color: #0066BB }
.item_buttons { display: table; float: right; width: 50px; height: 100%; background: #FF0000; }
.buttons_inner { display: table-cell; vertical-align: middle; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif") }
.button_no { background-image: url("images/no.gif") }
When I add in the inner div with position:absolute http://jsfiddle.net/THBFY/5/ the problem is the height no longer increases to show all of the text.
<div class="list_item_inner">...
.list_item_inner { position: absolute; height: 100%; }
But if I now change the min-height of the outer div from 70 to 200 http://jsfiddle.net/THBFY/6/, you can see that the 100% height on the red box is in fact working, so my problem is either in the first situation without the absolute position, I need the red box to stretch, or in the 2nd situation with the absolute div, I need the container to stretch.
HTML:
<div class="list_container">
<div class="list_item">
<div class="item_text">My text in this item. This could be a variable length creating a div ranging from about 75-150px in height. This is a lot of text to make it longer although I am not really saying anything here. It is only to make the blue box taller than the red box.
</div>
<div class="item_buttons">
<div class="buttons_inner">
<div class="button button_yes">Y</div>
<div class="button button_no">N</div>
</div>
</div>
</div>
</div>
CSS:
.list_container { position: relative; width: 400px; }
.list_item { border: #000000 solid 1px; display:table; }
.item_text { display:table-cell; width: 340px; background-color: #0066BB }
.item_buttons { display:table-cell; width: 50px; background: #FF0000; }
.button { display: block; margin-left: auto; margin-right: auto; height: 40px; width: 40px; background-repeat: no-repeat; }
.button_yes { background-image: url("images/yes.gif"); }
.button_no { background-image: url("images/no.gif"); }
fiddle
I have a wrapper div containing a right floated 100% height div and an image.
The image has a width set in %. As you resize the browser window the image height increases and decreased taking with it the height of the wrapper div.
When I set a fixed height on the wrapper div, the right floated 100% height div increases in height as I want it. However, the wrapper div has a dynamic height, set by the current height of the image and the 100% height div, in this instance does not resize vertically as you'd expect.
Is what I'm trying to do achievable?
Here's a pen: http://codepen.io/fraserhart/pen/qiFmb
<div class="wrapper">
<img src="http://i.imgur.com/7v619Ip.jpg" />
<div class="grid">
<section class="row">
<p>Home</p>
</section>
<section class="row">
<p>Looking For Care</p>
</section>
<section class="row">
<p>Working For Us</p>
</section>
<section class="row">
<p>Professionals</p>
</section>
<section class="row">
<p>Who We Are</p>
</section>
<section class="row">
<p>Find a Branch</p>
</section>
</div>
<div class="clear-fix"></div>
</div>
.wrapper{
background:blue;
height:auto;
}
img{
width:60%;
}
.clear-fix{
clear:both;
}
.grid {
display: box;
width:400px;
height:100%;
box-orient: vertical;
background:#ff0000;
float:right;
}
.row {
padding: 20px;
box-flex:1;
background: #ccc;
padding:0px 5px;
border:1px solid #ff0000;
text-align:center;
}
Well, here is one way of doing it, a bit bizarre, probably not to be recommended, but it is a proof of concept, an odd CSS curiosity.
Here is the fiddle: http://jsfiddle.net/audetwebdesign/3tUfC/
Here is the HTML:
<div class="wrapper">
<div class="image-port">
<img src="http://placekitten.com/800/800">
</div>
<div class="content-port">
<div class="grid">
<div class="row">
<img src="http://placekitten.com/100/25">
<p>First...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Second...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Third...</p>
</div>
<div class="row">
<img src="http://placekitten.com/100/25">
<p>Fourth...</p>
</div>
</div>
</div>
</div>
and here is the CSS:
.wrapper {
outline: 2px dotted blue;
}
.image-port {
outline: 1px dotted blue;
display: table-cell;
width: 60%;
}
.image-port img {
width: 100%;
vertical-align: bottom;
}
.content-port {
display: table-cell;
vertical-align: top;
background-color: wheat;
height: 100%;
width: 40%;
}
.content-port .grid {
}
.content-port .row {
border-top: 2px solid blue;
position: relative;
background-color: rgba(255,255,255,0.5);
overflow: auto;
}
.content-port .row:first-child {
border-top: none;
}
.content-port .row img {
width: 100%;
display: block;
visibility: hidden;
}
.content-port .row p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 0 0 0;
padding: 10px;
}
How It Works
A .wrapper block contains two table-cell elements: .image-port and .content-port,
with relative widths of 60% and 40% respectively. This avoids the problem of having the grid jump beneath the image for small window sizes.
In the .image-port, let the img scale to 100% width to get a good view of the image.
In the .content-port block element, set the position: relative, and optionally, overflow and a few other properties for visual design.
Here is the trick: in each .row, place a image with a certain aspect ratio. I created four rows so my image as a 4:1 aspect ratio. Set the .row img width to 100% and set the visibility: hidden so that the image takes up flexible space but is out of the way. This will allow each row row to change in size as you re-size the window.
Next, place your content in the .row, for example, a p. the content element is position: absolute such that it takes up the full width and height of the .row parent element (set the offset properties to zero).
The rows now have a height that scales with the width of the window. This approach has some flexibility, and though not perfect, may be useful.
Note that if you stretch the window wide enough, the 100x25 images will be their full width and the .grid will move away from the right edge of the wrapper. You can allow for this by using a larger placeholder image, say 1000x250.
If you make the placeholder image as a transparent gif or png, is should be light weight and since you are using the same image multiple times, the browser should really be making one request for it (I think?).
The Quirk about this approach is that how well the grid expands depends a bit on the aspect ration of the image in the image-port. You will need to experiment a bit and try to optimize the various parameters to get a pleasing layout.
I am trying to build a layout that consumes all the space that is visible in browser. I set html, body height 100% as was suggested in different SO posts. Following is the markup that I am trying
<div>
<div class="header">
</div>
<div class="main">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
max-height: 100%;
}
.header {
height: 30px;
background-color: #000;
}
.main {
height: auto;
padding-right: 0px;
max-height: 100%;
width: 100%;
display: block;
clear: both;
background-color: #eee;
}
.container {
width: 90%;
overflow-y: scroll;
background-color: #ccc;
}
.content {
height: 2000px;
width: 80%;
background-color: #fff;
}
the content div height cause the whole body to grow and hence the browser's default scroll bars are shown. Though I have set the container div to scroll in order to display the content of content div, still the scroll bars for container div don't show. How can I fix this.
here is the jsfiddle
Edited:
By default the height of the div element depends on its content (unlike width which takes 100% width of the parent). That's why when you specify the height of inner element as a percentage it won't be accurate if your parent tag has no explicitly defined height (that means height has to be defined up to the very top of the DOM since height is not inheritable).
In your case you need to add height: 100%; or any other height to your .container , .main and the wrapper div
modified fiddle
I have a div that comprises a graphic background overlaid with text. I want to center this element horizontally and vertically. But I can't get the text to center vertically. So far, I have the following code:
<div id="step">
<div id="background">
<img src="buttonbackground.png" class="stretch" alt="" />
</div>
<div>
<h3>some text</h3>
</div>
</div>
In the CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
z-index: -1;
}
#step {
text-align:center;
color:white;
}
.stretch {
width:200px;
height:40px;
}
Using the table-cell/vertical-align technique I've seen often referenced elsewhere doesn't quite work.
Given that it's an H3 i'm assuming it's a heading so it's probably gonna be one line of text. If that's the case just set the line-heightof the h3to the height of the container.
If instead it's a paragraph you can do this:
#centeredDiv {
position:absolute;
top: 50%;
left: 50%
margin-top:-20px ;(half the height of the container)
margin-left: -100px; (half the width of the container)
}
Don't mix pixels with percentages.
Try:
#step {
text-align: center;
vertical-align: center;
color: white;
height: 40px;
}
EDIT:
Alternatively, you could try explicitly setting the height of #background to 40px instead of 100%. It should achieve the same effect.