CODEWITHSUNDEEP
htmlcss
korkie
korkie

Reputation: 29

Can I align text in between an image and a table?

I'm a beginner and I'm having trouble getting a certain page to look the way I want for a project. I have an image floated on the left and a table on the right but as soon I add text in (which I would prefer in between the two) it pushes the table down the page.

CSS for the table and the image:

.charactertable
{
    padding: 0px;
    float: right;
}

.characters.img
{
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}

Upvotes: 1

Views: 32

Answers (2)

dfsq
dfsq

Reputation: 193261

Since the image is left-floated and the table has float: right, you need to put them in proper order in HTML, if you plan to add text in between.

The order should be this:

.charactertable {
    padding: 0px;
    float: right;
    border: 2px #DDD solid;
}
.characters.img {
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}
<img src="http://lorempixel.com/100/100" alt="" class="characters img">

<table class="charactertable">
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas cumque voluptatum est esse ea. Quis nulla cumque nihil vitae ipsa excepturi veniam ut perspiciatis quibusdam minima ipsam reprehenderit. Deserunt reiciendis.

Upvotes: 1

user4103823
user4103823

Reputation:

Can you provide some code? Anyway Try adding your text inside a div and centering the div. for example:

<div id="center">This will be centered between something</div>

CSS
#center{
margin:0 auto;
text-align:center;
}

Upvotes: 0

Related Questions