CSS: how to put one image and one block with two
in one line not using float

Question

I want to put one image and one block with two

in one line, but if use float on image, it will be out of that big block' border. I don't want to add height to the big block, because sometimes image doesn't exit. like this link: images and (p1 + p2 ) in one line. http://verygif.com/bbs/b/src/138002270032.jpg sorry for can't post images.

big_block {
border:2px solid #333;
}


<div class="big_block">
{if img exit }<img .... />{/if}
<p>sometext,sometext,sometext,sometext</p>
<p>fulltext,fulltext,fulltext,fulltext</p>
</div>

Just out of interest, what language does {if img exit}{/if} come from? I've never seen that in CSS. — maj, Sep 24 '13 at 11:37

score 2 · Accepted Answer · answered Sep 24 '13 at 11:46

2

Just declare overflow: hidden; on the parent <div> container. That will clear the float and ensures that the image does not go beyond the parent's borders by ensuring that the parents wrap around the paragraphs AND the image.

See example here: http://jsfiddle.net/teddyrised/8aeAL/

answered Sep 24 '13 at 11:46

Terry

63,248
15
96
118

The `.fix` class simply has the `overflow: hidden;` rule added :) – Terry Sep 24 '13 at 14:09

Ashis Kumar · Answer 2 · 2013-09-24T11:52:10.780

0

You can try using display: inline to <p> tags,

p { 
  margin: 0; 
  padding: 0; 
  display: inline; 
}

Check this http://jsfiddle.net/tpD2u

edited Sep 24 '13 at 11:52

answered Sep 24 '13 at 11:41

Ashis Kumar

6,494
2
21
36

Yes...in case no use of inline-block here. Thanks updating the code. – Ashis Kumar Sep 24 '13 at 11:51
I had trydisplay inline – longnight Sep 24 '13 at 12:34
I had try display inline, if you had two
you will fail.
– longnight Sep 24 '13 at 15:14

score 0 · Answer 3 · answered Sep 24 '13 at 11:59

0

I always use something like this:

.big_block img { float: left; }
.big_block:after { display: block; cler: both; content: " "; }

http://jsfiddle.net/QWm4T/

answered Sep 24 '13 at 11:59

Lukasz.Zdanikowski

61
5

CSS: how to put one image and one block with two in one line not using float

3 Answers3

CSS: how to put one image and one block with two
in one line not using float