I am trying to have 3 images aligned in one block. They have to stay in the same sized container and fit horizontally.
Here's the code:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 100%;
height: auto;
margin: 5px;
}
In my CSS solution, I divided the "container" class width by 3 (300px /3) and then subtracted 10px (which i got from padding-left and padding-right of each image). So a single image should have a width of 90px. However, I also wanted to subtract 5px more for browser spacing so the total width of each image should be 85px. Here is the code:
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
position:relative;
float: left;
text-align: center;
}
.container img {
width: 85px;
height: auto;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
</body>
</html>
Hm...I don't think you can have all three images in a horizontal line if you give them all a width:100%. That property would cause each image to take the full width of the container, meaning each image would be pushed to the next line.
You'll have to give the images a smaller width to fit them all on one line. 100% / 3 = 33.3% (rounded), so use that instead. Here's some modified CSS for .container img that seems to work:
.container img {
width: 33.3%;
height: auto;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Note that in addition to changing the images' widths, I also changed the margin to padding, and made use of the box-sizing attribute (read more about it here). This lets you keep that same spacing of 5px around images, without bumping any images onto a second line.
Also, the HTML needs to be altered slightly. In this case, we're taking advantage of the <img> element's default display:inline-block to have them all display on the same line. However, any whitespace in between this kind of element will result in a space between the images, so that needs to be eliminated:
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" /><img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" /><img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
</div>
If you don't understand what I mean by that, try formatting each <img> element onto its own line in the HTML, and see how that affects their positioning.
Here's a JSFiddle so you can see what this achieves. Let me know if you have any questions, and I'll be happy to help further!
EDIT: Alternatively, if you really want to keep the whitespace between your <img> elements in your HTML, you could compensate for the unwanted extra space with a negative margin. Just add margin-right:-4px; to your styles for .container img. Updated JSFiddle to show what this results in.
Related
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
So, I'm trying to align four images, two on top and two in the bottom. Together the four pieces form a map. To be even clearer: I sliced the picture of a map in four equal pieces, in PS, and now I want to put the pieces together in HTML code.
The code looks like this.
HTML:
<div id="container">
<img src="topleft.png" height="50%">
<img src="topright.png" height="50%">
<br style="clear:both"/>
<img src="bottomleft.png" height="50%">
<img src="bottomright.png" height="50%">
</div>
</body>
CSS:
img {
display:block;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
When I don't have the div around my images the size (height="50%") is correct and also the way they float: left to align with each other (except for where I used the br style="clear:both"/. But when I put them in a div the my size attribute doesn't work, and there is a line break after every picture, so they get stacked on top of each other.
Images are inline elements, just like text. Divs are block level elements that occupy the full width of the browser. You wrapped a block level element around an inline element. That is why your inlined images no longer work as you wish. Even floating won't fix the issue because the image is floated but the div occupies the full width.
One way to fix this is to set display:inline; or display:inline-block to your divs or you can float the divs.
you can try this one:
img {
display:inline;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
display:inline;
}
DEMO FIDDLE
But when I put them in a div the my size attribute doesn't work, and
there is a linebreak after every picture, so they get stacked on top
of eachother.
When you put the images in a div they become wrapped in a block element, which a div is by default. Block elements use all available width of their container. So the divs will stack vertically.
The HTML height attribute doesn't work as you expect because when a percentage value is used the height isn't calculated in relation to the image size.
From the height attribute definition in the spec:
Note that lengths expressed as percentages are based on the horizontal
or vertical space currently available, not on the natural size of the
image, object, or applet.
To achieve your layout quickly, efficiently and using a modern (CSS3) layout technique, try this:
HTML
<div id="container">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
</div>
CSS
#container {
display: flex;
flex-wrap: wrap;
width: 250px;
height: 250px;
}
img { width: 125px; }
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
So I understand how to center images when there is only one
using the css code block and margin but when I do that the images become on top of each other. I can hardcode the margins by doing margin-left: 30px but I also want to consider different screen size will change how the image is positioned. I would want to center it for all screens.
#image {
block:
margin:
}
jsfiddle
A simple approach might be to wrap your a and img elements in a wrapper div and apply the following CSS:
.wrap {
border: 1px dotted blue;
display: table;
white-space: nowrap;
margin: 0 auto;
}
Your HTML would look like:
<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
<img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>
You can control the spacing between a elements by adding a left margin to the second a (or a right margin to the first).
See demo: http://jsfiddle.net/v9LBZ/
How This Works
What is needed here is a block level container that can shrink-to-fit the width of the two logos, and display: table will do that. You can then apply margin: 0 auto to center the CSS table.
However, to prevent the CSS table from wrapping the two a elements into a single narrow column (trying to get the smallest width), you need to add white-space: nowrap to keep all the inline a elements on a single line.
You could leave them inline elements and wrap them in a container element with text-align: center applied. See this fiddle.
You could wrap your image in div then use float css property to achieve this :
http://jsfiddle.net/b7TQs/1/
.left, .right{
width: 50%;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I'm trying to center a block element (the WordPress caption box, including the image) but it won't work. I've tried:
.imagecenter {
margin-left: auto;
margin-right: auto;
display: block;
}
But it just won't work. I've also tried margin-left: auto; margin-right: auto; but that won't work either. Is there anything I'm doing wrong? This is what the W3C documentation says I should do.
It looks like this in the HTML (to clarify):
<div id="content">
........post here......
<div class="wpcaption imagecenter" style="width:225px">
<img src="blah" />
Blah.
</div>
.........post here......
</div>
I have no control over the width of the element. It's set by the user. The user wants the div to be centered. It's not working. I've looked over documentation but it still won't work.
EDIT: I HAVE ALREADY TRIED MARGIN-LEFT: AUTO AND MARGIN-RIGHT: AUTO. IT DOESN'T WORK.
In general, to position a div in the center, the technique is to make both the left and right margins auto and then give the div a width:
.centerDiv
{
margin-left:auto;
margin-right:auto;
width: XXX px;
}
Give it a width less than that of its parent.
.parent { }
.imgCenter { width:320px!important; margin:auto; }
<div class="parent">
<img src="foobar.jpg" class="imgCenter" />
</div>
An easier solution might be to set margin-left: auto, margin-right: auto and text-align: center (for the caption text) on all child elements of your containing element:
.imagecenter *{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This means you won't have to explicitly set the width of your containing element, but has the drawback that your caption text will have a 100% width, which might look wierd.
I know this is an old question, but for those of who find this on Google, I found another answer:
Just give these attributes to your wrapper element and the contents will be center aligned.
width: 1024px;
margin-left: auto;
/* I have used 1024px since I set the minimum resolution requirements for my website as 1024 x 768 */