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/
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.
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
Pretty rusty on my HTML and CSS skills, I've done this before at some point but forgotten how to do this.
I have text on the left side of the page, I want an image on the right side of this div next to it, floating there and not disturbing the text formatting.
Text Description.....
Description..........
Description.......... Image Goes About Here
Description..........
Description..........
Does anyone know how to do this off the top of their head? Thank you.
The easy solution is to use display: inline-block to display information next to an image, without having to add inline css.
img, p {
display: inline-block;
}
<img src="image.png" />
<p>
text left
</p>
use padding and float...
I.e.
<div id="container">
<div id="text" style="padding-right: <image-width+few px>">
text text text
text text text
</div>
<img src="<imagesrc" style= "float:right" />
</div>
padding so the text doesn't overlap with the image.
this should give you the desired effect.
After the image, add a div with clear:both to return to use all the dims of the div.
for example
<style type="text/css">
#picture {
float: right;
}
#text {
margin-right: 110px;
}
</style>
edited
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
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.