Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS to get elements side by side

Posted on 2013-10-29
27
Medium Priority
?
343 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

715 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