Solved

CSS to get elements side by side

Posted on 2013-10-29
27
341 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
Industry Leaders: 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 500 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
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…

617 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