<h2><img src="img.jpg" height="75px"> some text</h2>
I would like to position my image right next to a block of text but have it padded down slightly, how can I achieve this? I have tried style: padding 10px; without success inside the image tag.
I think you are looking for something like this. http://jsfiddle.net/3HZr7/
<h2>
<img src="img.jpg" height="75px">
<span>some text</span>
</h2>
h2{
overflow: auto;
}
h2 span{
float: left;
margin-top: 10px;
margin-left: 10px;
}
h2 img{
float: left;
}
You misunderstand the CSS box model.
Padding is for the space inside of the box, margin on the other hand, is responsible for the space outside the box, the space the box has from its container.
So your possible solutions are simple:
Apply padding on the parent element.
Apply margin on the image element.
Example.
Related
Looking to have an image (logo) on the left side of a div with text (a title) centered on the div. A basic question, but some caveats.
If I use position: absolute on the image, the text is centered, but when I resize the window the image covers the text. Want this to be a responsive page where the text is centered until it hits the image and the won't overlap. https://jsfiddle.net/mwqwmkdm/
If I use float: left on the image, then the text is not really perfectly centered. https://jsfiddle.net/mwqwmkdm/1/
I could create a margin-right of equal size on the other side of the text, but then I'm wasting those pixels on smaller displays and I don't want to do that. Eventually, it will be more than that one line I am centering. https://jsfiddle.net/mwqwmkdm/2/
Basically, I want:
the text centered as long as the screen is wide enough
the text to wrap around the image and not be in front of or behind it when the screen isn't wide enough
not to lose any screen space except for the image itself
Thanks
If you're willing to try an alternative to CSS float and positioning properties you can easily accomplish your task with CSS Flexbox. Code is clean, simple, efficient and easy to maintain. Also, flexbox is now supported by all major browsers.
DEMO
HTML
<div id="container">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<p>centered text</p>
</div>
CSS
#container {
display: flex;
border: 2px solid black;
background-color: aqua;
}
img {
margin: 10px;
}
p {
border: 1px dashed red;
padding: 5px;
flex-grow: 1;
text-align: center;
}
UPDATE
Here's one way to keep your text centered on the full width of the container, while not allowing the text and image to overlap on smaller screens. No flexbox, no deprecated tags. Just a very simple media query.
Wide screen
Narrow Screen
DEMO
Flex box has compability problems with some browser. Just Create BFC for the <center></center> using overflow:hidden;
Check this out! jsfiddle
You can use flexbox like this:
.wrapper{
display: flex;
}
.content{
flex-grow: 1;
text-align: center;
}
<div class="wrapper">
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
Centered Text
</div>
</div>
Check this out for more info https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background
Edit:
To center it respect to the container you can use a modification of you second example using float: left but instead to set the margin to the center you would put the text in a span and set the margin-right to it like this:
img {
float: left;
}
.content {
text-align: center;
}
.content span{
margin-right: 100px;
}
<div>
<img src="http://placehold.it/100x100" width="100" heigth="100">
<div class="content">
<span>Centered Text</span>
</div>
</div>
I'm trying to make a DIV that's pretty much a box with a border that has a left-aligned image and text that's to the right of the image. Here's how I have it set up:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
The problem is that, if the image is taller than the text, the surrounding DIV (and therefore the border) sizes itself to become the height it needs to be to fit in all the text, but the image overflows out of the DIV.
How can I make the DIV change its height to fit whichever is taller (the image or the text) so that both fit within the border?
Thanks.
Add display: inline-block" to your div.
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;display: inline-block">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
</div>
add one property to div
overflow: hidden;
absolutely it will work .
Add some element with clear: both; to "reserve" space for floated elements:
<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
<img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
Here is some text.
<div style="clear: both;"></div>
</div>
I would use clearfix, you can learn more about it here
Plus, careful, there is no border-size attribute, what you were trying to do was border-width.
Just my opinion here, it is best practices not using inline styles.
This way you have a clean solution.
So please see snippet below:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both
}
div {
padding: 1%;
border: 1px solid #000;
width: 100%;
}
div > img {
float: left;
max-width: 30%;
max-height: 200px;
}
<div class="clearfix">
<img src="http://i.imgur.com/FwgZFNn.jpg" />Here is some text.
</div>
Just before the end of the div i.e before </div>, you need to clear the float. The error is due to float style of the image. To clear the float just add this
<span style="clear:both;"></span>
Just before the </div> tag.
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
When we use <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p> then how can we have the same margin at right and bottom of the image?
http://jitendravyas.com/image-margin.htm
Use property
vertical-align: bottom;
to image, then the extra space from bottom will be deleted.
Problematic image height
Your image seems to exceed line-height setting by 5px exactly. That's why you're getting this excess space.
You can try negative bottom margin on this image only, but text may come too close to it. The amount of negative margin needed equals excess pixels (in the case of this image it's 5px).
Container DIV
You could however wrap your images in container DIVs that would have an exact line-height multiple height. And also set overflow: hidden; on them as well. But I suggest you set font-size and line-height to points (pt), to control their values.
A solution should be:
<style>
img{
float: left;
margin: 0 20px 20px 0;
background-color: #CCC;
}
p{
clear: left;
margin: 0px;
}
</style>
<p><img height="100" width="100" />dummy text dummy text dummy text dummy text</p>
<p>here some text</p>
You can clear the floating by applying the "clear: left;" to any tag after the "p".
However, I prefer the solution below (it solves the containing issue of the "p" tag, too):
<style>
img{
float: left;
margin: 0 20px 20px 0;
background-color: #CCC;
}
p{
margin: 0px;
}
div.clearer{
clear: left;
}
#container{
width: 300px;
border: 1px solid #CCC;
}
</style>
<div id="container">
<img height="100" width="100" />
<p>dummy text dummy text dummy text dummy text</p>
<div class="clearer"></div>
</div>
<p>here some text</p>
EDIT: My suggestion is the same even in the case of your example (however, in this example you can remove the "clear:left" applied to the "p" tag and you can't use the second method I've suggested)! The behavior of the tags "p" and "img", in the example, it's normal ... I try to explain:
if you set the line-height of the paragraph to 20px (with a font-size < 20px) and the margin (bottom and right) of the img (whose height is a multiple of 20) to 20px, the line at the bottom of the img is forced to split to the right if there aren't at least 40px (20px margin-bottom + 20px line-height) below the img! That it's normal, because there isn't enough space for a line of 20px height!
So, you can choose or to set the margin to a value minor than 20px or to reduce the line-height!
Okay, after having a look to the page, this is not a margin problem, but the fact that your font has not any space to be including at the next line.
Try to change the font size, and you will see that this margin is sometimes reducing, sometimes increasing.
It's because it's certainly an inline content. If you want to keep the content inline but remove the spacing, just add :
line-height: 0;
from: http://bytes.com/topic/html-css/answers/789019-img-bottom-margin-mystery
It's because imgs are display: inline, so they sit on the baseline like text, with a bit of space below them for descenders.
Make the img display: block.
I had this problem too, and I solved it by putting the <img>-tag in a <div>, with the line-height property set to 0.
Here is a jsfiddle.net example.
Notice how there is no space between the image and the <hr> below it.
This does not work if you need to put the image in the middle of a text, because the image will be ot its own line, with the text before it on the previous line, and the text after it on the next line, like here.
Maybe:
<style>
p img {
margin: 0px;
}
</style>