I have a div centered in the site and containing a picture. The div extends its height to fit the picture as expected. Then I add some text and I expect it to lay out on the bottom of the div. But in addition to that the div also resizes a little bit so its height is higher than the height of the picture. Here is the exmaple:
Html:
<div class="siteContent">
<img class="debug" src="../../Content/themes/base/images/pageTitle.png" />
<span>
aaa
</span>
</div>
CSS:
body
{
margin: 0;
}
.siteContent
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: thin solid;
}
.debug
{
border: thin solid;
}
The result:
The unwanted effect is marked red.
I was able to fix this for IE 8 and Firefox by modifiing the CSS like this:
body
{
margin: 0;
}
.siteContent
{
width: 960px;
margin-left: auto;
margin-right: auto;
border: thin solid;
position: relative;
}
.siteContent span{
position: absolute;
bottom: 0px;
}
.debug
{
border: thin solid;
}
After runnig this I got the right result in Mozilla:
However this does not work for Chrome and Safary. How can make it work for all major browsers ?
this happens because the image is aligned to the baseline of the text. try to set vertical-align: bottom or vertical-align: text-bottom for your image to solve this.
I think this is what you want: http://jsfiddle.net/WEF49/3/
Tested in IE, chrome and FF. This way img and span are bottom aligned and div do not have any extra space. Bad side is that div height is fixed to img height. If you do not mind fixed height on div this is cleanest solution.
html:
<div class="siteContent">
<img class="debug" src="http://t0.gstatic.com/images?q=tbn:ANd9GcRzjvZihxljFMlEt_IOypeOWYCgPgEvVrZ_DnwVTws5uR_iC_oFIg" />
<span>
aaa
</span>
</div>
css:
.siteContent
{
width: 960px;
height: 213px;
margin-left: auto;
margin-right: auto;
border: thin solid;
overflow:hidden;
}
.debug
{
border: thin solid;
}
Try adding overflow:hidden to the div without height
+
<span style="clear:both">
aaa
</span>
+
<img src="..." style="clear:both" />
take the style="*" to your css file (ofcource )
Related
Why is the image not rendered exactly in the middle of the enclosing DIV in this example?
div {
border: 1px solid gray;
line-height: 100px;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
If we run this example, we see that the image is closer to the bottom border than the top border.
Why does this happen?
What is the right way to vertically align an image in a DIV so that it is exactly in the middle of the DIV vertically?
If we check the documentation we will read this:
middle
Aligns the middle of the element with the baseline plus half the x-height of the parent.
So we need to identify these values in order to understand the alignement. If we refer to the above figure we can clearly see the baseline and we can also see the line-height (defined by 100px in our case). You can aslo notice that the middle is not the middle of the div but the middle of the text defined by the different values (font-family, font-size, etc).
To use easy words: your reference of alignment is no the div but the text inside the div.
To make it easier let keep the line-height with the default value and define a font-size instead (the line-height will be then equal to the font-size):
div {
border: 1px solid gray;
font-size:50px;
}
img {
height: 46px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
with a different font-family
<div style="font-family:arial">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You can cleary see that the middle is far from the middle of the div and if we change the font-family the alignment will also change.
In order to align content inside a div that contain text better rely on flexbox for example:
div {
border: 1px solid gray;
font-size:50px;
display:flex;
align-items:center;
}
img {
height: 46px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
that the element would be where it is required, he needs to specify it
img {
height: 96px;
width: 120px;
margin-left: calc(50% - 60px);
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
You could just add equal padding on the top and bottom of the div. This helps you to align the image in the center. There are also many other ways to center align items.
Please go through the article https://vanseodesign.com/css/vertical-centering/
div {
border: 1px solid gray;
padding: 20px 0;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg"> Foo
</div>
What is the right way to vertically align an image in a DIV ?
you can do it with vertical-align: middle;
div {
border: 1px solid gray;
}
img {
height: 96px;
vertical-align: middle;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
or you can use flexbox
div {
border: 1px solid gray;
display:flex;
align-items:center;
}
img {
height: 96px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Russula_emetica_117475.jpg" />
<span class="caption">Foo</span>
</div>
I'm working on my portfolio site and having trouble getting my divs to size together.
Here it is: I have one body div, inside there are two child divs.
The body div should have max-height 100%, max-width: 100% so that it doesn't exceed the browser window.
The left div contains an image which I want to scale to the parent body div (max-height 100%, max-width 70%).
The right div contains text about the image, it needs to scale to the height of the left div (there is also footer that sits at the bottom of this div).
This shouldn't be so hard, its almost working but right now my image container (left div) is not being contained to the body div.
html,
body {
height: 100%;
}
.Info {
float: left;
width: 25%;
padding-left: 15px;
padding-top: 10px;
/*margin-left: 78%;*/
border-left: 1px black solid;
/*position: absolute;*/
}
.InfoText p {
margin-top: -10px;
}
div img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
box-shadow: 5px 5px 15px #888888;
}
.ImageContainer {
float: left;
height: 100%;
max-width: 70%;
padding-right: 15px;
position: relative
}
section.ImageContainer img {
float: left;
object-fit: cover;
}
#SideQuote {
margin-top: 30px;
}
.StuffInBody {
position: relative;
padding-top: 15px;
float: left;
display: flex;
}
footer p {
position: absolute;
bottom: 0%;
margin: 0;
}
<div class="StuffInBody">
<div class="ImageContainer">
<img class="contained" src="images/TheGMODebate copy.jpg" alt="" />
</div>
<div class="Info">
<div class="InfoText">
<p>ILLUSTRATION</p>
<p>Title: <em>The GMO Debate</em>
</p>
<p>Media: Gouache</p>
<div id="SideQuote">
<p class="ClickToEnlarge">Full screen image click here.
</p>
</div>
<footer>
<p>© Brooke Weiland 2015</p>
</footer>
</div>
</div>
</div>
It's very hard to make a reliable interface using floats.
It changes default behaviour and put your element outside of the flux.
You should be able to do what you want using only flex.
The property box-sizing: border-box also makes miracles (margin and padding easier to manage).
Also, the object-fit property is not enough supported by browsers to be used now IMHO.
http://caniuse.com/#feat=object-fit
I have a 3 column layout which I'm creating using inline-block divs. The left and right columns are fixed widths but the inner column is to hold dynamic content and should expand horizontally as required by it's content width.
That's easy enough... the tricky part is that when the browser window is smaller (horizontally) than the width of the left, right and expanded middle divs, I would like the middle div to scroll and the side columns to stay fixed. In other words, the middle div's size should shrink and grow with window resize but should not grow beyond the available space.
Simply laying out the divs looks like this
https://jsfiddle.net/xzjp5xef/1/
HTML:
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
<div id="spacer">
150px spacer
</div>
</div>
<div id="rightcol">
right
</div>
</div>
CSS:
div {
height:200px;
border-style:solid;
display: inline-block;
border-width: 1px;
vertical-align: top;
}
#container{
white-space: nowrap;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
margin: 10px;
height: 20px;
}
#rightcol {
background-color: red;
width:100px;
}
The point of the "spacer" div is to represent the dynamic content which in this case I've fixed to 150px plus padding. So in this case I want the divs to lay out the way they do in the above fiddle, but then when the window is shrunk horizontally, I want the middle div to scroll and the left and right divs to remain fully visible.
That fails because then the window gets a scroll bar but the middle panel remains the same width and the right hand div disappears into the scrolled region.
My next attempt was using absolute positioning
https://jsfiddle.net/n4zrLqh2/
I fixed the left div to the left and the right div to the right and set the middle div's right and left properties. This is a neat trick which allows the middle div to stretch and take up all available space. This works nicely but doesn't create the effect I'm after when the window is big - because I don't want the middle column to expand further than is necessary to contain its content.
In the end I've solved this with javascript but would much prefer a CSS solution.
Edit: To help others see what I'm trying to achieve, here's the complete javascript solution (which I'd prefer to achieve with pure CSS):
HTML:
<div id="lcol">left</div>
<div id="midcol">
<div id="spacer">150px spacer</div>
</div>
<div id="rightcol">right</div>
CSS:
div {
height:200px;
display: inline-block;
vertical-align: top;
margin: 0px;
float:left;
}
body {
white-space: nowrap;
margin:0px;
max-height: 200px;
}
#lcol {
background-color:blue;
width: 100px;
}
#midcol {
background-color: yellow;
overflow-x: auto;
}
#spacer {
min-width: 150px;
height: 20px;
background-color: gray;
margin: 5px;
}
#rightcol {
background-color: red;
width:100px;
}
JAVASCRIPT (with jquery)
function adjustSizes() {
// Sizes of middle divs are dynamic. Adjust once
// built or whenever the viewport resizes
//
var $leftDiv = $('#lcol')
var $milddleDiv = $('#midcol');
var $rightDiv = $('#rightcol');
// 1. Resize middle div to available viewport space
var maxBodyWidth = $(window).innerWidth() - ($leftDiv.outerWidth() + $rightDiv.outerWidth());
$milddleDiv.css('maxWidth', maxBodyWidth);
}
$(window).resize(function () {
adjustSizes();
});
And the fiddle: https://jsfiddle.net/bjmekkgj/2/
I think setting max-width of spacer will solve your problem in case content increases.
Set max-width to calc(100vw - 200px) if all margin and padding are 0. Otherwise adjust the value 200px taking margin, padding into account.
I have created a plunker. Please check if it solves your issue. Try checking after running plunker in spearate window
http://plnkr.co/edit/WG9v0MyiD2hiaZrOA3Yw?p=preview
For the one example you provided, since the left and right columns are positioned absolutely, you should take up the space somehow. I used padding on the middle column, then nested a "content" block inside that represents the visible part of the middle column. Then, I put overflow-x: auto; on the new content block and set a max-width on the overall container to force the new block to shrink.
(In previous edits, I was attempting to do this same thing but with floats instead of absolutely positioned divs)
* { margin: 0px; padding: 0px; }
#container {
box-sizing: border-box;
display: inline-block;
position: relative;
max-width: 100%;
border: 1px solid black;
height: 200px;
}
.column {
box-sizing: border-box;
height: 100%;
}
#left {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-right: 1px solid black;
background: blue;
}
#mid {
border: none;
padding: 0px 100px;
}
#mid > .content {
box-sizing: border-box;
background-color: yellow;
overflow-x: auto;
height: 100%;
}
#spacer {
width: 150px;
height: 20px;
}
#right {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 100px;
border-left: 1px solid black;
background: red;
}
<div id="container">
<div id="left" class="column">
left
</div>
<div id="mid" class="column">
<div class="content">
<div id="spacer">
150px spacer
</div>
</div>
</div>
<div id="right" class="column">
right
</div>
</div>
...and in JSFiddle form
flexbox can do that.
div {
border-style: solid;
border-width: 1px;
}
#container {
height: 200px;
display: flex;
}
#lcol {
background-color: blue;
width: 100px;
}
#midcol {
background-color: yellow;
flex: 1;
overflow-x: auto;
}
#rightcol {
background-color: red;
width: 100px;
}
<div id="container">
<div id="lcol">
left
</div>
<div id="midcol">
</div>
<div id="rightcol">
right
</div>
</div>
JSfiddle Demo (showing overflow effect).
Support is IE10 and up.
Try setting the middle div to have a max width with a percentage so it will get thinner with the screen size:
.midcol {
max-width: 25%;
}
I put a value for the max-width in there for an example, but you can change the value.
I am trying to achieve the following configuration of elements for a webpage:
[Left Icon Image]<-padding->[Horizontally Centered Icon Image]<-padding->[Right Icon Image]
Each icon has some text below it which is centered relative to it's own center What is the best way to achieve this using HTML and CSS?
You didn't post any code so normally I wouldn't help but since this isn't that hard and there are many ways to do this I will show you one.
HTML:
<div id="con">
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Text under the first one</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>Test under the second</span>
</div>
<div>
<img src="http://www.psdgraphics.com/wp-content/uploads/2009/08/danger-icon.jpg" />
<span>And third</span>
</div>
</div>
CSS:
#con {
width: 600px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
}
#con div img {
width: 200px;
}
So here we create 3 "boxes" that will contain each image with text. We set the width and height then use float. Now we need to put them in a container so we can center them using margin: 0 auto;.
From there it's just get the image you want in the boxes and type your text under it. I put a span so you can see where it is a bit better + you can style it using the span.
DEMO HERE
Here is one with a margin around each so they push away from eachother. Don't want to use padding as that's inside the element (I guess you could but margin would be better).
CSS:
#con {
width: 660px;
height: 200px;
margin: 0 auto;
}
#con div {
width: 200px;
height: 200px;
float: left;
text-align: center;
margin: 0 10px;
}
We added a margin to #con div and then have to change the #con width to account for the newly added 60px caused by the margin.
DEMO HERE
I'm making a site and trying to center the image head. However, it doesn't appear to be working.
Here is the HTML:
<body>
<div id="templatemo_header">
<div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>
</div>
</body>
And the CSS:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 762px;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
width: 762px;
margin: 0 auto;
}
I tried to add margin: 0 auto; to the image, but it still is not centered. How can I do this?
Modify the css for the div containing your image with:
margin: 0 auto;
width: 100%;
Add the following to your CSS file:
.image { width:762px; margin:0 auto;}
Your wrapping div is the same width as the image, this stops any margins from being automatically applied since there is no space.
There are a few ways to fix this, but easiest would be to set the width of templatemo_header (the wrapper div) to 100%. This way the image margins can expand, thereby centering the image.
So in your css, modify the width from 762px to 100%, like so:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 100%;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}