Given this simple layout:
HTML
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div>
This should always stay to the right of the image.
</div>
</div>
CSS
.container {
height: 20vh;
}
.imgContainer {
float: left;
height: 100%;
}
img {
height: 100%;
}
Issue #1
Chrome, Firefox, and Opera correctly display it like this:
IE11 incorrectly puts the text 400 pixels to the right, based on the natural width of the image:
Issue #2
As you increase the window's height, the text should stay glued to the right of the image. This works correctly in Firefox.
However, the text overlaps the image in Chrome and Opera:
See the behavior in this Fiddle.
Question: Is there a style I can add that will cause all browsers to behave consistently?
[Note: I discovered this while working on this question. I thought I had a solution, until I realized it wasn't responsive in any browser except Firefox.]
The following might do the trick.
Instead of using float, I would suggest using CSS tables.
Apply display: table to .container and set the height as needed.
For the two child elements, .imgContainer and .panel, use display: table-cell and inherit the height from the parent block.
I think this is pretty close to what you need, should work in all browsers
(but I did not check...)
.container {
height: 20vh;
display: table;
}
.imgContainer, .panel {
display: table-cell;
height: inherit;
vertical-align: top;
}
img {
vertical-align:top;
height: inherit;
}
<div class="container">
<div class="imgContainer">
<img src="http://placehold.it/400x400">
</div>
<div class="panel">
This should always stay to the right of the image.
</div>
</div>
Related
Container:
Image parent:
Image:
Example: https://codesandbox.io/s/q4q6lwj719
The image on the right (and a couple of css rules) makes left image render larger than its natural size. But its parent doesn't scale with it and is sized as if the image was rendered in its natural size.
Seems weird to me. Am I missing something?
NOTE: Some times (seems to be random) it's fixed in Chrome (v72.0.3626.119). In Firefox (v65), it's always broken.
It's because of the first element style <div style="display: flex">. By default the style align-items sets to stretch so your image makes larger than its natural size. Use the style align-items: center; or set it to baseline or whatever you want to prevent changing the size.
body {
font-family: sans-serif;
}
.item {
display: inline-block;
max-height: 250px;
}
.item img {
height: 100%;
}
<div style="display: flex; align-items: center;">
<div class="item video">
<img
alt="Quiz of Kings (بازی آنلاین)video"
src="https://www.conti-engineering.com/CMSPages/GetFile.aspx?guid=6f8b829a-e0a5-49e1-9882-122d1d3efb06"
/>
</div>
<img
class="item"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgKNQKR-foUvskwO90hnlG_pyTQfeMsyIaFfJiWQV_AkTc8TPB"
/>
</div>
I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.
I have setup a site with content region of fixed width and variable height, horizontally and vertically centred, based on the css and html found in this answer.
That works pretty fine in all Browsers I have tested, even in IE (11). However the page needs to work in fullscreen mode, too and if i run it in ie, the content goes to the upper left corner.
here is my html:
div.wrapper-1 {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
div.wrapper-2 {
display: table-cell;
vertical-align: middle;
}
div.wrapper-3 {
margin: 0px auto;
width: u($page-width);
}
<body>
<div class="wrapper-1">
<div class="wrapper-2">
<div class="wrapper-3">
<!-- does all my content go -->
</div>
</div>
</div>
</body>
What can I do to make that work in fullscreen, too?
Thanks for help!
Finally, after digging around I could get it up and running!
I added that to my css:
html {
width: 100%;
height: 100%;
}
On your div.wrapper2 and 3 set a position:relative; This will keep it relative to your div.wrapper1 and should solve that issue. This is also found on the second part of the answer you linked.
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
I'm wondering what the best way to go about doing this is...
I have 3 divs:
a div#container with width=100%; that holds 2 inner divs
a div#inner_left with width changing dynamically, but no wider than 200px (will hold a product image)
an div#inner_right where the width should fill the rest of the space in the container (will contain text to describe the product shown)
#container {
width:100%
}
#inner_left {
display:inline-block:
max-width:200px;
}
#inner_right {
display:inline-block;
width:100%;
}
The problem is that the div#inner_right creates a line break and fills the entire width. How can I make them align next to each other, with the right div accounting for the width taken by the left div (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...
Any help for a CSS noob is much appreciated!
I haven't really seen a good solution in the answers here. So I'll share mine.
Best way to do this is by using the table-cell option in CSS. One important thing to add is a 'min-width' to the element that has a pixel width.
Example:
<div id="left">
Left
</div>
<div id="right">
right
</div>
CSS:
#left {
display: table-cell;
min-width: 160px;
}
#right {
display: table-cell;
width: 100%;
vertical-align: top;
}
Have a look at "liquid layouts" it can describe what you're talking about.
You're probably looking for this one.
In your example, try setting your display to inline. However, you won't technically be able to use block level elements in it, so have a look at the links I posted above. :)
The problem with setting the width to 100% if you're using floats is that it is considered 100% of the container, so it won't work either since the 100% includes the left div's width.
Edit: Here is the example of the other answer, I've edited it to include the html/css from the example site above for simplicity's sake.
I'll also include it below:
HTML
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b></div>
</div>
CSS
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}
This can be accomplished using Flex-Box, which has been introduced with CSS3 and according to Can I use is cross-browser.
.container {
display: flex;
}
.left {
width: 100px; /* or leave it undefined */
}
.right {
flex-grow: 1;
}
/* some styling */
.container {height: 90vh}
.left {background: gray}
.right {background: red}
<div class="container">
<div class="left">100px</div>
<div class="right">Rest</div>
</div>
So even though I wanted to do this with CSS only, I ended up just using tables...
Use floating:
#container{
width:100%
}
#inner_left{
float:left;
max-width:200px;
}
#inner_right{
float:left;
width:100%;
}
Edit: have a read a this, it's a nice little guide : quirksmode
you need to provide position:absolute style property to both your div's
This is based on #w00 's answer. +1 friend.
My situation was when I wanted to show a couple of icons next to a label. I use the fluid class for that which is where the nowrap comes in. This is so the icons appear on the same line.
.sidebyside-left-fixed, .sidebyside-right-fixed
{
display: table-cell;
width: 100%;
}
.sidebyside-left-fluid , .sidebyside-right-fluid
{
display: table-cell;
vertical-align: top;
white-space: nowrap;
}
Here is an easy method to achieve this, and this is something that's quite frequently needed. It's also tested to works with all browsers, including the very old ones (let me know if it doesn't on any).
Link to a sample: https://jsfiddle.net/collinsethans/jdgduw6a/
Here's the HTML part:
<div class="wrapper">
<div class="left">
Left Box
</div>
<div class="right">
Right Box
</div>
</div>
And the corresponding SCSS:
.wrapper {
position: relative;
}
$left_width: 200px;
.left {
position: absolute;
left: 0px;
width: $left_width;
}
.right {
margin-left: $left_width;
}
If you are not using any CSS preprocessors, then replace the $left_width with your value (200px here).
Credit: This is based on http://htmldog.com/examples/pagelayout2/.
There are several other useful ones there.