CODEWITHSUNDEEP
htmlcsssvg
Alexander Matusiak
Alexander Matusiak

Reputation: 1828

SVG Adding Padding to other elements

I'm having some issues getting an SVG to play well in the layout that I have written. Here is the example I have for the working table-cell layout that I have been working on. The first jsfiddle links to the working example. When I replace the text on the left with an SVG for some reason, the content on the right column gets pushed down. Any idea why?

working example

broken example

Working Example HTML:

<div id="wrapper">
<div id="row">
    <div id="left-col">
        There are many variations of passages of Lorem Ipsum available
    </div>
    <div id="right_col">
        <aside><strong>ASIDE</strong></aside>
        <div id="banner1">Banner 1</div>
    </div>
</div>

Broken Example HTML: 

<div id="wrapper">
<div id="row">
    <div id="left-col">
        <div id="divMapContainer" class="embed-responsive embed-responsive-1by1">
            <svg width="400" height="100">
                <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect>
            </svg>
        </div>
    </div>
    <div id="right_col">
        <aside><strong>ASIDE</strong></aside>
        <div id="banner1">Banner 1</div>
    </div>
</div>

CSS:

body {
    background-color: #333;
    margin: 1em;
}

#wrapper {
    width: 100%;
    max-width: 46em;
    margin: 0 auto;
}

@media (min-width: 48em) {
    /* 768px */
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
    nav,
    #banner2 {
        display: block;
    }
    #row {
        /* the rule below is redundant
   thanks to SelenlT2
*/
        /*display: table-cell;*/
    }
    #left-col,
    #right_col {
        display: table-cell;
    }
    #left-col {
        width: 50%;
    }
    footer {
        display: table-footer-group;
    }
}

#banner1 {
    background-color: #9ed6f9;
    height: 50%;
}

#left-col,
#right_col {
    background-color: #fff;
}

#right_col {
    height: 100%;
}

aside {
    background-color: #fbcdfa;
    height: 50%;
}

#left-col,
aside {
    text-align: left;
    padding: .5em;
}

nav,
header,
#banner1,
#banner2,
footer {
    text-align: center;
}

.note {
    color: #fff;
    text-align: center;
}

Upvotes: 0

Views: 3129

Answers (1)

Jordan Soltman
Jordan Soltman

Reputation: 3883

It's because SVG elements are inline by default. You can set the vertical-align property on your SVG so that the other elements will align to the top of it. See updated fiddle.

svg {
  vertical-align: top;
}

Upvotes: 2

Related Questions