0

I have div which includes:

<div class="field-content">
 <a href="http://url.com">
  <img width="320" height="194" src="http://img.jpg"></img>
  <div class="tile_content">
   <div class="tile_title">content</div>
   <div class="tile_body">content</div>
  </div>
 </a>
</div>

In some cases this field-content has not img-tag at all. Then I want tile_content to be vertically centered to field-content. When img-tag exists then image is positioned at top of field-content and tile_content is under image.

two cases This demonstrates those two situations. In first one there is image and under image tile_content. In second one there is only tile_content - no img at all.

Any ideas/tips how to make this work?

My CSS:

.field-content {
margin: 0px 0px 15px;
height: 365px;
width: 320px;
display: block;
overflow: hidden;
float: left;
background-color: #FFF;

.tile_content {

}
ace
  • 283
  • 1
  • 16
  • Can you post another image that shows what do you need aferwards the image isn't there? – Abhinav Gauniyal Jul 28 '14 at 08:47
  • if .field-content doesn't come not at all for sometimes means .tile_content also wont come.. because it is child of it... wat u want say clearly?? or put it in fiddle – PraJen Jul 28 '14 at 08:47
  • Sorry, tag was not shown in my post. I edited it so this is the case "In some cases this field-content has not img-tag at all." – ace Jul 28 '14 at 09:03
  • Although it wont answer your question, it's worth noting that `` tag is a self closing tag, so instead of `` you should do `` or just `` – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Jul 28 '14 at 10:00

2 Answers2

0

The only Thing you Need to know is vertical centering of div. This Problem is already solved here:

How to vertically center a div for all browsers?

You can add class has-image to .field-content do you can define own Styles for block with Image and without it. For example:

<div class="field-content has-image">
 <a href="http://url.com">
  <img width="320" height="194" src="http://img.jpg"></img>
  <div class="tile_content">
   <div class="tile_title">content</div>
   <div class="tile_body">content</div>
  </div>
 </a>
</div>

So your CSS Looks like

.field-content.has-image {

}
Community
  • 1
  • 1
m1k1o
  • 2,344
  • 16
  • 27
0
  • If I got your question correct, then simply,

Put that img tag inside a div, give that div the same height as that you have given for image, so, it won't matter if the image is inside that div or not. it will always appear as a block, so won't collapse

OK, first time, I took it other way, I thought there are 3 divs, Sorry for that. Here is the fiddle link:

enter code here

http://jsfiddle.net/happy2deepak/6U3kw/1/

Deepak Yadav
  • 6,804
  • 5
  • 31
  • 49
  • But I need to have text content centered vertically. Image height is not center of the div. – ace Jul 28 '14 at 12:32
  • Give your div a specific height, set it this css `display:table-cell;vertical-align:middle;height:350px` or, create a fiddle, I will try to fix it for you. – Deepak Yadav Jul 28 '14 at 12:34
  • Check the edited answer above with Fiddle link, you need to add a extra class to text container, .has-img – Deepak Yadav Jul 28 '14 at 13:59
  • As I said to M1K1O I cant add that kind of styles. Can't distinguish is there image or not. So seems that this is not possible to do just with CSS then. Thanks anyways! – ace Jul 28 '14 at 14:06