Solved

CSS to get elements side by side

Posted on 2013-10-29
27
324 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
 
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 500 total points
ID: 39609746
Add to the anchor tag
width: 240px;
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchiā€¦
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now