Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

Can't align SVG

Hello guys...

I have problem with aligning SVG images, if I try this with divs and not with SVG images everything works, I even tried putting images inside of DIVS but still same result...

This is what I'm getting in chrome: Chrome SS

And this is how it looks like in mozilla and how it SHOULD look like: Mozilla SS

Here is my code as well:

    <div class="blogimg">
        <div class="veralign blogimgwrap">
            <img src="images/blog_text.svg" class="imgtext">
            <img src="images/blog_avatar.svg" class="imgavatar">
        </div>
    </div>

.blogimg {
    width:100%;
    height:calc(100% - 200px);
}

.blogimgwrap {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.imgtext {
    max-height: 100%;
}

.imgavatar {
    position: absolute;
    right: -40px;
    bottom: 0px;
    max-height: 90%;
}

7 Answers

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Ivan - do you have this on a link somewhere so I can have a nose at the developer tools

Ivan Tomicic
Ivan Tomicic
3,873 Points

Sure... Here it is

Thank you so much!

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

The actual SVG is 2400 px wide (ish) its positioning correctly but there in which lies the problem

Ivan Tomicic
Ivan Tomicic
3,873 Points

But why is is positioned right in mozilla? How can I fix that?

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Just having a nose in Illustrator for you

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

I did think you were going to ask the Mozilla question - honest answer is I dont know but if we fix the Chrome version then the Mozilla one will still have the same result for you - which I am guessing is ok

Ivan Tomicic
Ivan Tomicic
3,873 Points

Yes, Mozilla is showing it how it should look, her photo on right side and text on left...

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Something to do with sizing issues of the width - try messing about with the width setting as shown below

.imgavatar { position: absolute; right: -40px; bottom: 0px; max-height: 90%; width: 20%;

Ivan Tomicic
Ivan Tomicic
3,873 Points

This almost helped me, only problem I'm having now is with text part, it won't take 100% height unless I tell it to go all the way in width but then it center it again?

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Is this a responsive build

Ivan Tomicic
Ivan Tomicic
3,873 Points

Not yet, but will be, that is why I'm using svg instead of jpeg...

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Im leaving the office shortly but have you had a look over the CSS tricks article on SVG - I have found using the file as an include with php gives more control over it http://css-tricks.com/using-svg/