I'm wrapping text around an image using markup something like this:
CSS:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
HTML:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="..." alt="..." />
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
This actually looks okay except that, if the text is shorter than the height of the image, my page footer is also wrapped around the image.
I want my footer to appear below the image. If I add <p style="clear:both"> </p> to clear the float, then I have too much space above my footer.
How can I clear the float and force any subsequent markup below my image without adding any more whitespace?
Add overflow: hidden to the CSS for the paragraph that contains the floating image. That will make the paragraph grow to fully contain the floated image. For example:
<h2>Author Information</h2>
<p class="inner">
<img id="imgAuthor" src="http://placekitten.com/200/200">
<b>Bob Smith</b>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
p.inner {
overflow: hidden;
}
And a live version: http://jsfiddle.net/ambiguous/S2yZG/
Alternatively, you could stick a <div style="clear: both;"></div> right at the bottom of the paragraph but you should only use this in cases where you need the overflow to be something other than hidden. For example:
<h2>Author Information</h2>
<p>
<img id="imgAuthor" src="http://placekitten.com/250/200">
<b>Bob Smith</b>
<div class="cBoth"></div>
</p>
<p>
Here is some bio information about the author...
</p>
And:
#imgAuthor {
float:left;
margin: 0 15px 15px 0;
}
.cBoth {
clear: both;
height: 1px;
}
And a live version of this approach: http://jsfiddle.net/ambiguous/3yGxA/
Why does overflow:hidden work? From the CSS3 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that is a flow root (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same flow as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats [...]
Your <p style="overflow: hidden;"> satisfies the third condition so its bounding box is extended below the bottom of the floating image so that there is no overlap.
You were on the right path to try <p style="clear:both"> </p> but all you need to do is change the height and margins.
<div style="clear:both; height:1px; margin:0;"></div>
alternatively you can just add clear: both to the footer style and forget this markup.
Related
I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.
I can't seem to float my image to the left? Can't figure out why?
I've applied a class of align-left which contains float: left.
Live version at - https://www.workbooks.com/salesforce-alternative (see the review grid half way down below the heading 'High customer satisfaction ratings').
Code:
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<h2 style="height: 400px;"></h2>
<p></p>
</section>
CSS:
.align-left {
float: left;
}
.bluesection {
background-color:#ecf0f2;
padding: 50px 100px 50px 100px;
}
Try this code:
<section class="bluesection card__content__headings">
<h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">
<p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>
<p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>
<p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
<p style="clear:both;"></p>
</section>
As you can see, I change the img after h2, and I have added a p with clear:both style to the end inside of the section. Also I have added and removed some CSS styles to get a nice look.
It's not float-left but float: left;. That's not the only issue though.
The image is already floating left but the reason it doesn't work the way you want it to work is because of the padding of the blue section.
Keep in mind that the image is floating to the left relative to the element it is enclosed in. If you change the value of padding to padding: 20px 50px 20px 50px; you can see that the image will move further to the left because the padding got smaller than it was initially.
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
Sam
it already floated left, the reason it cant go any further is because it reached the edge of the div. padding shrinks the edges relative to the child elements, but maintains it defined size unless values are bigger.
here is a recommended fix:
HTML
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<div class="text">
<h2></h2>
<p></p>
</div>
</section>
CSS
.bluesection {
position: relative;
width: 100%;
display: flex;
}
.text {
width: 100%;
}
example in jsfiddle: https://jsfiddle.net/qf6w18p1/
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
You can fix the height, but when you see your code in a phone device (360px x 640px), the section title h2 will be located under img, and it will not look nice.
My advice is to change the orden of the h2 and img tags.
I'm still a beginner in css, and I'm trying to give some margin-left to my paragraph and <h2> but its not working.
I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.
But its not working, can you give some help?
What Im trying:
My jsfiddle with the problem:
http://jsfiddle.net/2p9vw/5/
My html:
<div id="example">
<img src="images/image3.jpg" width="226" height="129" />
<h2>Example</h2>
<p>text here text here text here text here text here text here text here text here text here text here </p>
</div>
My css:
#example {width:690px; height:auto; font-size:16px; margin:15px 0 0 0;}
#example img{float:left;}
#example h2{float:right;margin-left:10px; font-size:16px; color:#444;}
#example p{ text-align:justify; margin-left:10px; }
I have a div with 700px and I want to give 10px of margin-left for my <p> and <h2> in relation to the image.
But its not working
It is working – you just don’t see it working.
Since your image is floated, that means any inline content will float around it – but the block elements like p and h2 still go over the full width, underneath your image – and that’s why you don’t see any effect of that margin, because it is “under” the image.
Simply give your image a margin-right of 10px instead. http://jsfiddle.net/2p9vw/4/
For example you want to display an image beside a text, usually I would do this:
<table>
<tr>
<td><img ...></td>
<td>text</td>
</tr>
</table>
Is there a better alternative?
You should float them inside a container that is cleared.
Example:
https://jsfiddle.net/W74Z8/504/
A clean implementation is the "clearfix hack". This is Nicolas Gallagher's version:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
All these answers date back to 2016 or earlier... There's a new web standard for this using flex-boxes. In general floats for these sorts of problems is now frowned upon.
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS
.image-txt-container {
display: flex;
align-items: center;
flex-direction: row;
}
Example fiddle: https://jsfiddle.net/r8zgokeb/1/
Yes, divs and CSS are usually a better and easier way to place your HTML. There are many different ways to do this and it all depends on the context.
For instance, if you want to place an image to the right of your text, you could do it like so:
<p style="width: 500px;">
<img src="image.png" style="float: right;" />
This is some text
</p>
And if you want to display multiple items side by side, float is also usually preferred.For example:
<div>
<img src="image1.png" style="float: left;" />
<img src="image2.png" style="float: left;" />
<img src="image3.png" style="float: left;" />
</div>
Floating these images to the same side will have then laying next to each other for as long as you hava horizontal space.
these days div is the new norm
<div style="float:left"><img.. ></div>
<div style="float:right">text</div>
<div style="clear:both"/>
What about display:inline?
<html>
<img src='#' style='display:inline;'/>
<p style='display:inline;'> Some text </p>
</html>
Usually I do this:
<div>
<p>
<img src='1.jpg' align='left' />
Text Here
<p>
</div>
It depends on what you want to do and what type of data/information you are displaying. In general, tables are reserved for displaying tabular data.
An alternate for your situation would be to use css. A simple option would be to float your image and give it a margin:
<p>
<img style="float: left; margin: 5px;" ... />
Text goes here...
</p>
This would cause the text to wrap around the image. If you don't want the text to wrap around the image, put the text in a separate container:
<div>
<img style="float: left; margin: ...;" ... />
<p style="float: right;">Text goes here...</p>
</div>
Note that it may be necessary to assign a width to the paragraph tag to display the way you'd like. Also note, for elements that appear below floated elements, you may need to add the style "clear: left;" (or clear: right, or clear: both).
The negative margin would help a lot!
The html DOM looks like below:
<div class="main">
<div class="main_body">Main content</div>
</div>
<div class="left">Left Images or something else</div>
And the CSS:
.main {
float:left;
width:100%;
}
.main_body{
margin-left:210px;
height:200px;
}
.left{
float:left;
width:200px;
height:200px;
margin-left:-100%;
}
The main_body will responsive it's with, may it helps you!
Try calling the image in a <DIV> tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV> tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.
Here is the pic/text- sided by side version, which can be used for blog post and article listing:
<div class="whatever_container">
<h2>Title/Header Here</h2>
<div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>
<div id="textcontent">
<center>
<br /><p>........... ARTICLE IN HERE .........</p>
</center>
</div>
#textcontent {
margin-right: 25px;
}
#textcontent p {
margin-right: -24px;
width: 663px;
}
ARTICLE IN HERE will display an article posted by user.
Snapshot:
Problem:
A line of an article by pass the side boundries. How can i set specific fixed width so the text gets indented (moved to second line) automatically and doesn't pass the side borders?
Note: text area height gets expanded automatically as lines of text increase.
Extra Info:
<div id="posted_wrap">
<div id="posted_middle">
<div id="posted_top"></div>
<div id="textcontent">
<center>
<br /><p><?php echo $thread; ?></p>
</center>
</div>
<br />
<div id="posted_bottom"></div>
</div></div>
#textcontent p {
margin:0 auto;
text-align:center;
width: 663px;
Remove <center> as it's not needed, and is deprecated. Set your margin of your paragraph tag to have auto (left and right).
That code works. The code you posted works too - so you may have a positioning or float issue going on above the code you're struggling with.
If those black "chalk" lines are a background image you can add:
padding:0 10px (for example) to your <p> tag to keep the text inside further from the edges.