Why is my text still wrapping under a floated div? - image

I have a render component which renders out some text and an image. The component is a DIV containing two divs. The first div contains an image, this div is floated to the right. The next div contains various text strings. I have overflow: hidden on the parent div, but my text is still wrapping around the div containing the image. The only way I can fix this currently is by setting the height to 100% for the div containing the image. However, if I do this I can't add a border / background to this div because it extends the entire page.
In short, I have a div containing two divs. I want my text in a column, and the image in the other. I do not want the text to wrap under the image. I've visited the other text wrapping questions, but overflow hidden or adding span tags doesn't seem to be solving my problem.
Below is the render function and the SASS/CSS that goes with it.
render() {
const renderHelpFile = this.props.data.filter(obj => {
return this.props.name === obj.name;
}).map((obj, idx) => {
return (
<div key={idx} className="fadingDiv">
<div className="divImg">
<img src={`${obj.image}`} className="helpFileImg"></img><br />
</div>
<div className="displayLineBreak">
<h3 style={upperStyle}> {obj.name} </h3>
<b>Path:</b> {obj.path} <br /><br />
{obj.content} <br /><br />
<b>Troubleshooting:</b> {obj.troubleshoot} <br /><br />
<b>Video:</b> {obj.video} <br />
</div>
</div>
);
});
css
.fadingDiv {
text-align: justify;
overflow:hidden;
-webkit-animation: divFadeIn .75s ease-in forwards;
animation: divFadeIn .75s ease-in forwards;
}
.displayLineBreak {
white-space: pre-line;
}
.divImg {
width: 35%;
float: right;
padding: 5px;
background: #0080ff;
border: 2px solid black;
border-radius: 2px;
//height: 100%;
}
.helpFileImg {
width: 100%;
height: auto;
}

That's how float is supposed to work - text "floats" around it.
Instead of using float, you could either define both containers as inline-block, with according widthsettings, or you could put display: flex on the container element.
If you know the width of the image, you can use that for a fixed width on the image container and use calc for the width of the text container, like width: calc( 100% - XXpx );, where XX stands for the width of the image.

Related

css - container div fit content to image

I'm wondering if it is possible to specify a div (example div2) or another sourrounding element of an image to fit the height and width to its child.
Besides, the image should resize (keep aspect ratio) to the full available space (div1) of the div2's parent.
As the image and therefore the aspect ratio, image orientation, hieght and width can change dynamically, no fixed sizing is possible
Here is an example fiddle:
http://jsfiddle.net/rp7u3u2r/1/
<div style="width:200px; height: 200px;">
<div style="max-height: 100%;max-width:100%;">
<img style="max-height: 100%;max-width: 100%;" src="..."/>
</div>
</div>
Expected behavior:
I already tried 'object-fit', 'fit-content', 'display: table-cell', 'display: inline-block', but nothing seems to work as expected.
updated fiddle http://jsfiddle.net/rp7u3u2r/3/
<div style="background-color:red; width:200px; height: 200px; font-size:0; line-height: 0;">
<div style="background-color: green; display: inline-block;">
<img style="width: auto; height: auto; max-height: 200px;max-width: 200px;"
src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
</div>
Use these styles:
#div1 {
width: 200px;
height: 200px;
}
#div2 {
box-sizing: border-box;
height: 100%;
float: left;
}
img {
height: 100%;
}
Both div2 and img will be constrained to the height of div1.
box-sizing allows you to add border and padding to div2 without overflowing div1.
Fiddle

How to vertically center multiple images of varying heights in a row using vertical-align: middle

There are many questions on this topic already posted so sorry for posting another. However, none of the others that refer to my situation -- vertically aligning a row of images of undefined height, rather than a single image -- have received a reply that accomplishes what I need to do. As far as I can tell, Kizu's first solution here: How to vertically align an image inside div should be the thing, but alas I can't get it to work.
So, I have a container div. I can specify a height for this div if necessary. I can also place this div in another div if necessary.
Inside the div, I want to place a row of images of varying heights. These images should be vertically centered in relation to each other (not just in relation to the container div).
I cannot use background images in this case (the images are being placed within a text widget for easy replacement purposes).
As far as I can tell, I also cannot use display: table on the container div and display: table cell on my images, because the table cell must have a defined height, and my images are of varying heights.
Here is my code -- I've got a couple of extra divs (#footer-single-widget and .footer-single) to achieve the overall centering and padding I want, so I'm including these as well in case one of them is affecting the subsequent divs:
<div id="footer-single-widget">
<div class="footer-single">
<div class="textwidget">
<div class="media">
<img src="#image-1" width="103" height="36" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
<img src="#image-1" width="103" height="26" class="alignleft" />
<img src="#image-1" width="103" height="40" class="alignleft" />
</div><!-- end of .textwidget -->
</div><!-- end of .media -->
</div><!-- end of .footer-single -->
</div><!-- end of #footer-single-widget -->
And the CSS:
#footer-single-widget {
width: 100%;
}
.footer-single {
text-align: center;
max-width: 980px;
margin: 0 auto;
}
#footer-single-widget .textwidget {
display: block;
height: 40px;
width: 980px;
}
.media {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.media img.alignleft {
display: inline-block;
vertical-align: middle;
max-height: 40px;
max-width: 200px;
}
The frustrating thing is at some point I achieved exactly this effect -- then decided I didn't need it (all my images at that point were the same height) and deleted the code I had written. Now I need it again and don't have the faintest memory of what I did! But I know it's possible... somehow. Thanks for your advice.

How to make a floated image act responsively?

Please see this fiddle
My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?
<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
For your goal you should use em or % and use inline-block.
jsfiddle.net/geNuR/ Look at this jsfiddle
Don't know why i can't put code propely, maybe forum blocked our country))
​
The key to responsive images with flowed text does rely on float. However, the key is in floating the img element, not the text.
First, place the img tag before the text, giving a markup as so:
<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
The importance of this order is that the img will be floated to the right, removing its cleared blocked region height, and the text will flow up and around it.
Next, remove the float from the text, allowing it to flow, and apply a float right to the image. I will also note, that to give a margin between the text and the img, the margin is applied to the img, giving you this styling:
img { max-width: 100%; height: auto; }
#text{ width:100px;}
.frame {
float:right;
background: #fff;
padding: 6px;
margin-left:10px;
box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}
Here is a jfiddle demonstration
I'm assuming that you're looking to have text and an image side-by-side here, so apologies if I'm wrong.
Like M. Berro, I would first put the two elements inside a containing div, as below:
<div id="container">
<p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
<img src="/image.png" title="An image, aligned right" />
</div>
To sit the image and text side-by side, I would use the following CSS as a starting point:
#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }
In my example, I've applied a float to each of the two elements (You will of course have to clear the floats to make sure the rest of the page's structure remains intact - I suggest looking at Clearfix, as it avoids any extra empty divs). I've also given the text a min-width: this ensures that the text doesn't contract to a point where it is unreadable!
As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.
You need the following:
Make a container div id=img_container give style width (let's say 400px)
Put your image inside the container and give a style #img_container img{float: left}
Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10
This is the full example:
<style>
#img_container {
width: 400px;
}
#img_container.text {
margin-left: 306px;
}
#img_container img.frame {
float: left;
}
</style>
<div id="img_container">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>
You could start by adding the css max-width: 60%; in .frame. It's not perfect but is this similar to what you are trying to achieve? Better results can be realized with javascript/jQuery.

How to auto center an img inside a div regardless of browser window size?

I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.

Responsive Image Adds Spacing

For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}​
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.

Resources