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.
Related
I have this html and this css.
.entry-content > .greyfruitdrawing {
height:2000px !important;
width:2000px !important;
margin-top:40px;
}
.redletters1 {
font-size:40px;
opacity:0.7;
color:red;
position:relative;
top: 20px;
font-weight: bolder;
line-height:1.6;
text-align:justify;
}
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>
The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting greyfruitdrawing affects position of redletters1
Site: https://4309.co.uk/about-us/
Set the height and width of an outer container and then give the image itself a height and width of 100%:
.container {
text-align: center;
width: 2000px;
height: 2000px;
margin-top: 40px;
}
.greyfruitdrawing img {
height: 100%;
width: 100%;
}
.redletters1 {
font-size: 40px;
color: rgba(255,0,0,0.7);
font-weight: bolder;
line-height: 1.6;
}
<div class="container">
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
</div>
<div class="redletters1">SOME TEXT.</div>
</div>
Edit
There are a few problems with what you are doing here. First off, height and width are not properties that are inherited. In your example, you are defining the height and width of the div surrounding your image in your css, not the image itself, which is why it is affecting the "position" of the red lettering. The div is getting bigger and pushing the text downwards.
Simply move the greyfruitdrawing class inside your image tag instead of your div surrounding it.
Also, it is generally bad practice to use the !important property, although I don't know what the other classes you are linking to do, so maybe they are needed to override some presets you are using.
You have many different classes and properties trying to change the size of the image. I would recommend you do something simpler.
Either change the height and width properties within the tag to match how big you want the image to be, or remove these properties and define it in your css.
Alternatively, if you want the image to fill the size of the div then I would recommend the answer by symlink.
The reason this is affecting the position of the red lettering is because you are making the div bigger, which is pushing the letters down the page. You can't see what is happening because the div is the same color as the background.
Using css to define height and width:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" class="size"/>
</div>
//notice the class is in the <img> tag and not the <div> surrounding it.
.size {
height: 2000px;
width: 2000px;
}
or defining height and width within the tag:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" height="2000" width="2000" />
</div>
I would like to create two adjacent <div>'s satisfying the following properties:
The left one contains a picture, and the right one contains some text.
The picture is resized so that its height matches the height of the text, without being distorted.
The right <div> has its width extended fully to the edge of the screen.
Here is an example of what I mean. I have manually set the height of the image to 70px, but I would like this to be automatically set so that the two blocks have the same height.
.container {
display: flex;
}
.left {
margin-right: 5px;
border: 1px solid black;
}
.right {
width: 100%;
border: 1px solid black;
}
<div class="container">
<div class="left">
<img src="https://media.istockphoto.com/photos/stack-of-colorful-books-left-border-picture-id147704087" style="height: 70px;"/>
</div>
<div class="right"> line 1 <br> line 2 <br> line 3 <br> line 4 </div>
</div>
I have heard that tables should not be used for this sort of thing, but if there is a solution with tables, I am okay with that.
Indeed using tables for img and text presentation is not considered a good practice.
I should add that styling them inline also is not considered a good practice too.
In case you need to dynamically change those values in a web page tou could use javascripts native methods to get and set those heights.
var left = document.getElementsByClassName("left");
var height = left.clientHeight;
document.getElementsByClassName("right").style.height = left;
I should also note that you should keep in mind that you should calculate any other DOM space that the element might use, like padding margin or border.
I have a div that contains a float left image and then text. It does the following.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Note, how it creates the outer div size based on the text alone and then it inserts the floating image, causing the text to wrap. I want the outer div width to be the width of the floated image + the width of the text, and then only line-break when it reaches the max-width of 95%.
EDIT: I also don't want ALL of the text to go below the image once the first line reaches the edge of the page. However, when there is a lot of text, I do want it to wrap under the image.
You can use flexbox to achieve that, see the example below:
jsFiddle
.outer-div {
display: inline-flex;
align-items: flex-start;
max-width: 95%;
background-color: yellow;
}
<div class="outer-div">
<img class="image" src="http://www.w3schools.com/images/colorpicker.png">
<div class="test">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Using "inline-block" on the test DIV should set it to align next to the other block. Add the following to your CSS section and you should be good.
.test {
display: inline-block;
}
Then you can add the following if you wanted it to be centered at the top rather than the bottom:
vertical-align: top;
Hopefully this helps you out! Best of luck!
A friend of mine was messing around and found the answer. The answer is to float the image inside the test div with the text. No changes need to be made to the CSS.
Example below:
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking.</div>
</div>
Here is an example with a lot of text to verify that it wraps under the image.
.outer-div {
max-width: 95%;
background-color: yellow;
display: inline-block;
}
.image {
float: left;
}
<div class="outer-div">
<div class="test"><img class="image" src="http://www.w3schools.com/images/colorpicker.png">Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.Here is some text that I want the outer div to size to without line-breaking. And here is a ton more text to add to the post to show that it properly wraps around the image even with a ton of text.</div>
</div>
Thanks to everyone who provided answers. Your answers will definitely help me with things in the future, so upvotes to you all. :)
Try adding this to your code
width: fit-content;
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.
I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..
Let's say the wrapper width is 1000px.
Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..
Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?
Graphic of what I am trying to accomplish:
The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.
HTML:
<div id="wrap">
<div id="left">
Left
</div>
<div id="center">
center
</div>
<div id="right">
Right
</div>
</div>
CSS:
#wrap
{
width: 1000px;
display: table;
}
#wrap div
{
display: table-cell;
border: 1px solid #000;
width: auto;
}
#center
{
padding: 0 30px;
text-align: center;
}
You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)
I think this is as close as you're going to get with pure CSS.
Good 'ole tables to the rescue:
http://jsfiddle.net/hgwdT/
Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:
http://jsfiddle.net/XXXdB/
The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.
I also confirmed that this solution works in IE8 and FF, in addition to Chrome.
This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!
Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):
HTML:
<div id="wrapper">
<div class="side"></div>
<div id="middle">One line of text.</div>
<div class="side"></div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper div {
float: left;
height: 300px;
}
.side {
background: #ddd;
}
#middle {
background: #eee;
padding: 0 30px;
text-align: center;
}
JavaScript:
var adjustSize = function(){
// Declare vars
var wrapper = $('#wrapper'),
middle = $('#middle'),
totalWidth = wrapper.width(),
middleWidth = middle.width(),
middleOuterWidth = middle.outerWidth(),
remainingWidth = totalWidth - middleOuterWidth,
sideWidth;
if(remainingWidth % 2 === 0){
// Remaining width is even, divide by two
sideWidth = remainingWidth/2;
} else {
// Remaining width is odd, add 1 to middle to prevent a half pixel
middle.width(middleWidth+1);
sideWidth = (remainingWidth-1)/2;
}
// Adjust the side width
$('.side').width(sideWidth);
}