Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS to get elements side by side

Posted on 2013-10-29
27
Medium Priority
?
344 Views
Last Modified: 2013-10-29
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

0
Comment
Question by:etech0
  • 14
  • 13
27 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39609355
Add display: block; to your anchor tags and remove float:right from .nrelate_related .nr_text {}
0
 
LVL 10

Author Comment

by:etech0
ID: 39609380
Thanks. Which anchor tags should get display:block?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609403
The link around the image and text
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Author Comment

by:etech0
ID: 39609429
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
 
LVL 58

Expert Comment

by:Gary
ID: 39609474
Add to .nrelate_related .nr_text {}

width: 85px;
display: inline-block;


and remove the width:100%;
0
 
LVL 10

Author Comment

by:etech0
ID: 39609488
hmmmm. That moved the words to under the image...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609500
Not on the page I'm looking at. Do an hard refresh.
0
 
LVL 10

Author Comment

by:etech0
ID: 39609512
Funny - in chrome it's fine, but in firefox the words are underneath
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609536
Reduce the width to 83px
0
 
LVL 10

Author Comment

by:etech0
ID: 39609587
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
 
LVL 58

Expert Comment

by:Gary
ID: 39609647
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
 
LVL 10

Author Comment

by:etech0
ID: 39609711
Now we're back to the words underneath...
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39609746
Add to the anchor tag
width: 240px;
0
 
LVL 10

Author Comment

by:etech0
ID: 39609781
Cool! Only thing is that the hover border still looks a bit funny - it's not smooth across the top and bottom.

Thanks!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609797
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
 
LVL 10

Author Comment

by:etech0
ID: 39609808
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
 
LVL 58

Expert Comment

by:Gary
ID: 39609812
The height on the anchor tag, it is 146px at the mo.
0
 
LVL 10

Author Comment

by:etech0
ID: 39609818
It's 147 by me...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609833
Ok, it shows now.
So what is wrong with it - looks fine to me.
(Add the transparent border to stop the jumping effect)
0
 
LVL 10

Author Comment

by:etech0
ID: 39609838
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
 
LVL 58

Expert Comment

by:Gary
ID: 39609847
Don't know what you are doing but the height is back to 146px and there is no transparent border.
0
 
LVL 10

Author Comment

by:etech0
ID: 39609868
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
 
LVL 58

Expert Comment

by:Gary
ID: 39609883
You need

.related-content .nr_panel a{
     border:1px solid rgba(0, 0, 0, 0) !important;
     height:147px
}
0
 
LVL 10

Author Comment

by:etech0
ID: 39609886
but the a has a class of nr_panel!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609903
Ahh your right.
Well I'm not seeing that css class in your style.css file or any file.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39609913
And it seems to be fine again...
0
 
LVL 10

Author Comment

by:etech0
ID: 39609918
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question