CSS to get elements side by side

Hi! I'm struggling with setting up some CSS for a certain section of my web page.

Here's the page: http://goinspire.com/jews-win-many-nobel-prizes/

On the right side, by "You might also like", here's the problem:

I can't seem to get the title of the related content to be next to the image. Whatever I try gets it to be underneath.

Can you please advise? Here's my CSS in case it helps:

/*related content customizing*/


/*PANEL*/
.nrelate_related .nr_panel{
    float:left;
    background:none;
    font-size:11px;
    border:1px solid transparent !important;
    margin:1px;
    padding:1px 1px 0px;
    text-decoration:none;
    cursor:pointer;
    height:150px;
    display:table-row;
}
/*TITLES*/
.nrelate_related .nr_title {
    font-size:16px;
    margin-top:0;
    margin-bottom:5px;
}

.nr_title span{
    color:#25408f;
}

div.nr_inner {
    display:table;
}


/*IMG*/
.nrelate_related .nr_img_div {
    line-height:0;
    position:relative;
    background:none repeat scroll 0 0 #000000;
    background-color:transparent;
    border:0px solid #cccccc;
    float:left;
}

.nrelate_related img.nr_img {
    color:#25408f; 
    border: none;
    display:block;
    margin-left:auto !important;
    margin-right:auto !important;
    padding: 2px !important;
    background:none repeat scroll 0 0 #F0F0F0;
    border-top:1px solid #FFFFFF;
    outline:1px solid #DDDDDD;
    width:auto !important;
    border:1px solid #FFFFFF !important;
    margin:0 !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -khtml-box-shadow: none !important;
    box-shadow: none !important;
 }


/*
span.nr_img_div,
span.nr_text{
    display:table-cell;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
*/
/*TEXT*/

.nrelate_related .nr_text  {
    font-size:14px;
    overflow: hidden;
    word-wrap:break-word;
    clear:left;
    float:right;
    font-family:sans-serif;
    font-weight:bold;
    padding:2px;
    margin-top:4px;
    margin-left:5px;
    text-align:left;
    width:100%;
}



.nrelate_related .nr_source  {
    font-size: 9px;
    font-style: italic;
    font-weight:normal;
}


.nrelate_related .nr_panel .nr_source,
.nrelate_related .nr_panel .nr_excerpt{
    display:block;
}

.nrelate_related .nr_panel .nr_excerpt{
    font-weight:normal;
}



.nrelate_related ul li .nr_excerpt,
.nrelate_related ul li .nr_source{
    padding-left:5px;
}

div.nrelate div.nr_inner a.nr_panel { 
    margin: 0 auto !important; 
} 

/*HOVER*/
.nrelate_related .nr_panel:hover{
    background:#F2F2F5;
    border:1px solid #CCC !important;
    margin:1px 1px 1px 1px;
    padding:1px 1px 1px 1px;
}

.nrelate_related .nr_panel:hover .nr_img  {
    /*background:none repeat scroll 0 0 #333333;*/
    border:1px solid #555555 !important;
    outline:1px solid #111111;
    color:black;
}

Open in new window

LVL 10
etech0Asked:
Who is Participating?
 
GaryCommented:
Add to the anchor tag
width: 240px;
0
 
GaryCommented:
Add display: block; to your anchor tags and remove float:right from .nrelate_related .nr_text {}
0
 
etech0Author Commented:
Thanks. Which anchor tags should get display:block?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
The link around the image and text
0
 
etech0Author Commented:
Cool! Now I can't figure out why the padding-left on the text is only applying itself to the top line of text. Any ideas?
0
 
GaryCommented:
Add to .nrelate_related .nr_text {}

width: 85px;
display: inline-block;


and remove the width:100%;
0
 
etech0Author Commented:
hmmmm. That moved the words to under the image...
0
 
GaryCommented:
Not on the page I'm looking at. Do an hard refresh.
0
 
etech0Author Commented:
Funny - in chrome it's fine, but in firefox the words are underneath
0
 
GaryCommented:
Reduce the width to 83px
0
 
etech0Author Commented:
Great! 2 more things:

1. Can we make the words centered vertically according to the image?

2. When I hover over a link, I get a black border. For some reason the border around the image is on top of the border, so it doesn't appear smooth. Any ideas?

Thanks!!!
0
 
GaryCommented:
Change min-height to 147px on the anchor tag and add
padding: 1px 0 0 1px;

Add to .nrelate_related .nr_text {}

display: table-cell;
vertical-align: middle;
height: 140px;
0
 
etech0Author Commented:
Now we're back to the words underneath...
0
 
etech0Author Commented:
Cool! Only thing is that the hover border still looks a bit funny - it's not smooth across the top and bottom.

Thanks!
0
 
GaryCommented:
You didn't change the height to 147px, you might also think about adding this to the anchor tag as well
border: 1px solid rgba(0, 0, 0, 0);
0
 
etech0Author Commented:
which height should I change?

I took out the outline, and now I just see the border - which gets cut off near the images
0
 
GaryCommented:
The height on the anchor tag, it is 146px at the mo.
0
 
etech0Author Commented:
It's 147 by me...
0
 
GaryCommented:
Ok, it shows now.
So what is wrong with it - looks fine to me.
(Add the transparent border to stop the jumping effect)
0
 
etech0Author Commented:
I already have border:1px solid transparent !important; on the anchor tag.

Do you see a border all  the way around? Over here, it gets cut off by the image.
0
 
GaryCommented:
Don't know what you are doing but the height is back to 146px and there is no transparent border.
0
 
etech0Author Commented:
I don't know where the min height is coming from!

I have this CSS block, and don't know why I can't see the transparent border...

.related-content .nr_panel{
    float:left;
    background:none;
    font-size:11px;
    border:1px solid rgba(0, 0, 0, 0) !important;
    margin:2px;
    text-decoration:none;
    cursor:pointer;
    min-height:150px !important;
    display:table-row;

}

Open in new window

0
 
GaryCommented:
You need

.related-content .nr_panel a{
     border:1px solid rgba(0, 0, 0, 0) !important;
     height:147px
}
0
 
etech0Author Commented:
but the a has a class of nr_panel!
0
 
GaryCommented:
Ahh your right.
Well I'm not seeing that css class in your style.css file or any file.
0
 
GaryCommented:
And it seems to be fine again...
0
 
etech0Author Commented:
it's in style.css
I just changed the hover to have a border instead of an outline, and that fixed that problem.

I think I'm good now. Thanks for ALL your help and patience!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.