CODEWITHSUNDEEP
htmlcssasp.netasp.net-mvc
Tom Limpens
Tom Limpens

Reputation: 59

Image next to text in ASP.NET View

I would like to display some text next to an Image I have, however no matter how I change the css it does not seem to respond. In de css file I tried changing "p.StoryLineText" to Just StoryLineText, to just p, I tried p .StoryLine text. Am I missing something obvious?

My view code

@model BlueRateITLogicLayer.Models.Film
@{
    ViewBag.Title = "Film";
}

<link href="~/Content/FilmsStyle.css" rel="stylesheet" />

    <img src="@Model.ImageFilePath" class="FilmImage" />
    <p class="StoryLineText">@Model.StoryLine</p>
    <h2>@Model.Name</h2>

my css file

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.FilmImage {
    width: 150px;
    height: 200px;
    float: left;
}

p.StoryLineText {
    float: right;
}

Upvotes: 2

Views: 618

Answers (1)

Fran
Fran

Reputation: 6520

I'm not a huge fan of floats.

You could use inline-block to stack the elements horizontally.

   body {
        padding-top: 50px;
        padding-bottom: 20px;
    }

    /* Set padding to keep content from hitting the edges */
    .body-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }

    .FilmImage {
        width: 150px;
        height: 200px;
        display: inline-block;
        vertical-align: middle;
    }

    p.StoryLineText {
        display: inline-block;
    }

This will place the text directly to the right of the image and the text will be vertically aligned in the middle of the image.

Upvotes: 1

Related Questions