Two column layout with one row spanning trouble :-(

[Nightwing]

Thanks sam, just got a bit tired will have another go after “another” coffee. Thank you for taking time out to look at this

[SamA74]

This is a very simplified example showing how it can work:

[PaulOB]

Hi,

I know you know this but mainly for Nightwing’s benefit please be careful with this rule:

.table div {
  display: table-cell;
}

It is unlikely that every div in that section will need to be a table-cell and even if there are no extra divs at the moment it is likely that should code or layout change then you could end up with cells where you don’t want them (as in Nightwing’s original).

Much safer and more maintainable to use a class instead.

.cell {
  display: table-cell;
}

[Nightwing]

Round 10, ding ding!!

Ok SamA74 really like what you’ve done here, I feel I am so close to the finish line even if I have ran out of coffee. My last battle with this mission now presents!

I need images next to the bullet points and here what i prepared (badly) earlier…

As can be seen the text slams at the bottom of the image as illustrated below:

Is it fair to say I will have to learn how to do list bullet replacement as explained here?

Replacing List Bullets with Images Using CSS

Thanks in advance,
David

[PaulOB]

An image is aligned to the baseline which means text will align along the bottom because that is also on the baseline. You could set the image in question to vertical-align:top and that will align the text with the top (add a class to the image and apply vertical-align-top and at the same time add a right margin).

However it does depend on what the next step is and whether you have more text or text that needs to wrap alongside the image or under it. If so then you would need to float the image or do something different. It all depends on what happens next.

[Nightwing]

So close now! Yes i followed this tutorial to get the text lined up with the image how i want:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

But… how do i get the text on the right hand side of the image (not left as is) All I need ( I hope ) is a pointer on how to flip the text and image position.

So if any one has the patience I’m all ears

The damage so far:

[SamA74]

@Nightwing

But… how do i get the text on the right hand side of the image (not left as is)

Come on! Just change the order

<li><p><img class="top-image-text" src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/photostudio-200-200_zpsd5m6ascl.jpg">Mobile Studio</p></li>

It’s inline, so the order of the content in the line goes left to right.

[Nightwing]

Thank you SamA74, that worked!