CODEWITHSUNDEEP
htmlcss
D P.
D P.

Reputation: 1059

Text between two image?

I am new to html/CSS and trying to put text between two images. using the following code, I was able to do that. But if I have to much text, the format goes out of order as shown in figure 1. Can you please tell me how can I make my website look like Figure 2?

<!DOCTYPE html>
<html>
<body>
  <div class="header">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
</body>
</html>

Figure 1: enter image description here


Figure 2: enter image description here

Upvotes: 2

Views: 6494

Answers (5)

DJXiej
DJXiej

Reputation: 48

For a simple fix I would use a HTML table. A single row 3 column table would work and just play with align in the <td> tag and/or pic size in <img> tag. There's plenty of attributes to work with that can do what you are asking. Check out http://www.w3schools.com/html/html_tables.asp

<!DOCTYPE html>
<html>


<body>
    <div class="header">
        <table>
            <tr>
                <td>
                    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
                </td>
                <td>
                    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering any aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.
                    </a>
                </td>
                <td>
                    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
                </td>
            <tr>
        </table>
    </div>

</body>
</html>

Upvotes: 1

Hai Tien
Hai Tien

Reputation: 3117

You can use table like : http://jsfiddle.net/bTSNj/

<div class="header">
  <table>
    <tr>
      <td> 
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
      </td>
      <td>
        <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
      </td>
      <td>
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
      </td>
    </tr>
  </table>
</div>

or you can use div by using float like : http://jsfiddle.net/j94PP/

<div class="header">
  <div class="column1">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
  <div class="columtext">
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.
    </a>
  </div>
  <div class="column3">
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/>
  </div>
</div>

Upvotes: 0

Jimmy Hsu
Jimmy Hsu

Reputation: 42

If you need the center column dynamic in width, this works well: http://jsfiddle.net/SNMQm/6/

HTML:

<div class="header">
    <div class="content-right">
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
    </div>

    <div class="content-left">
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle">
    </div>
    <div class="content">

        <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a>
    </div>
</div>

CSS:

.content-right {
    float: right;
    width: 130px;
}
.content-left {
    float: left;
    width: 130px;
}
.content {
    margin: 0 150px;
    width:100%;
}

Upvotes: 0

TGH
TGH

Reputation: 39248

Try something like this

<img style="float:left" /><div style="float:left">All your text</div><img/>

Upvotes: 0

Sean Henderson
Sean Henderson

Reputation: 596

JS Fiddle

You can float all the elements, wrap the text in a div and then assign a width to the div that contains the text. You could either do this with inline style, or in a separate style sheet as shown in the example.

Styles added:

img {
  float: left;
}
#text {
  width: 300px;
  float: left;
}

Upvotes: 2

Related Questions