Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

Sure... Here it is

Thank you so much!

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

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

Just having a nose in Illustrator for you

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

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

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%;

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?

Is this a responsive build

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

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/