CSS class not applying correctly to image on site

Question

First time website builder, so I'm still a bit shaky on how exactly CSS applies to html docs.

I'm trying to split my page into 2 divs, each taking 50%. The left contains an image, whereas the right contains text. This forms a side-by-side configuration.

When I enter my code as such:

<div class="infobox">
    <div style="float:left;width:50%;">
        <img src="foo.jpg" style="max-width:95%;height:auto;margin-top:10%;border-radius:10%;overflow:hidden;" alt="">
    </div>
    <div style="margin-left:51%;">
        <h1>MAIN PAGE</h1>
        <p>Welcome to the page. This is a test message for the time being. This will eventually become
                    replaced by full text.</p>
        <p>Welcome to the page. This is a test message for the time being. This will eventually become
                    replaced by full text.</p>
        <p>Welcome to the page. This is a test message for the time being. This will eventually become
                    replaced by full text.</p>
        <p>Welcome to the page. This is a test message for the time being. This will eventually become
                    replaced by full text.</p>
        <p>Welcome to the page. This is a test message for the time being. This will eventually become
                    replaced by full text.</p>
    </div>
</div>

everything works as expected. The image stays in its div, has rounded borders, etc.

However, when I try to move the css code to my master.css file, everything breaks. My code is as follows:

<div class="infobox">
            <div style="float:left;width:50%;">
                <img class="image-style" src="foo.jpg" alt="">
            </div>
            <div style="margin-left:51%;">
                <h1>MAIN PAGE</h1>
                <p>Welcome to the page. This is a test message for the time being. This will eventually become
                replaced by full text.</p>
                <p>Welcome to the page. This is a test message for the time being. This will eventually become
                replaced by full text.</p>
                <p>Welcome to the page. This is a test message for the time being. This will eventually become
                replaced by full text.</p>
                <p>Welcome to the page. This is a test message for the time being. This will eventually become
                replaced by full text.</p>
                <p>Welcome to the page. This is a test message for the time being. This will eventually become
                replaced by full text.</p>
            </div>
        </div>

And in my master.css file:

.image-style {
    max-width: 95%;
    height: auto;
    margin-top: 10%;
    margin-left: 10%;
    border-radius: 10%;
    overflow: hidden;
}

When this second method is used, side-by-side configuration breaks. The image now takes up 100% of the screen, with the text still in the correct position above it. Additionally, none of my style changes apply to the image. I don't understand; doesn't the image inherit it's size/positioning restrictions from the div it's inside of? Why isn't it inheriting the div above it in this format, and why isn't the image accepting the class style?

I feel like I'm missing something completely obvious, but I just can't see it anywhere. Any assistance will be greatly appreciated.

score 0 · Accepted Answer · answered Jun 21 '17 at 02:48

0

if you have linked external css file correctly, just clear the browser cache and try it.

answered Jun 21 '17 at 02:48

ThilinaMD

345
3
11

Thanks, that got it. Guess my cached data was breaking everything. I knew it was something easy like that. – ratcheting_weasel Jun 21 '17 at 02:59
https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development – ThilinaMD Jun 21 '17 at 03:28

score 0 · Answer 2 · answered Jun 21 '17 at 02:55

0

Please add float:left; to the image class if you are correctly linked your external css

.image-style {
    max-width: 95%;
    height: auto;
    float:left;
    margin-top: 10%;
    margin-left: 10%;
    border-radius: 10%;
    overflow: hidden;
}

answered Jun 21 '17 at 02:55

J. Shabu

813
7
20

CSS class not applying correctly to image on site

2 Answers2