I have a Div where Its width is 770px wide. Aligned to the right on the top is a picture with text that wraps around the picture. Can someone tell me how they would add a table under the picture that has 2 columns and 4 rows? I want the table to be separated with a little space from the picture. I want the text to wrap around the picture and table. Can someone help?
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Help with coding using css 1
- Thread starter sthmpsn1
- Start date
-
1
- #3
No need for another table.
Simply put the image and table in another div and float it right.
Some other CSS can then style you table (or image) to give you the space you need.
Something like this...
Simply put the image and table in another div and float it right.
Some other CSS can then style you table (or image) to give you the space you need.
Something like this...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrapper {
width:770px;
border:1px solid black;
padding: 5px;
}
#right {
width:300px;
border:1px solid red;
float:right;
padding:10px;
margin:5px;
}
#right img {
border: 1px solid black;
}
#right table {
margin-top:10px;
border: 1px solid blue;
}
#right table td{
padding:2px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="right">
<img src="myPic.jpg" alt="My Picture"/>
<table>
<tr>
<td>r1 c1</td>
<td>r1 c2</td>
</tr>
<tr>
<td>r2 c1</td>
<td>r2 c2</td>
</tr>
<tr>
<td>r3 c1</td>
<td>r3 c2</td>
</tr>
<tr>
<td>r4 c1</td>
<td>r4 c2</td>
</tr>
</table>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean malesuada feugiat nisl. Donec non arcu in dui nonummy auctor. Nulla tempus. Aenean aliquam, purus ut iaculis facilisis, nunc eros tincidunt massa, quis imperdiet felis erat in dolor. Vivamus iaculis magna a turpis. Vivamus vitae nisl. Sed in nisl. Donec massa urna, bibendum a, suscipit eget, commodo semper, massa. Sed et magna. Maecenas posuere enim quis elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus sodales porttitor tortor. Nunc congue justo. Maecenas in elit non nulla dictum vulputate. Nunc commodo nibh vitae erat. Donec quis orci sed turpis pharetra fringilla. Quisque eget neque vel dolor ultrices commodo. Praesent placerat, dui nec mollis tincidunt, nunc nibh molestie quam, sed imperdiet nulla nunc a dolor. Aliquam erat volutpat. Praesent accumsan mi eget velit. Mauris posuere vulputate dui. Nam blandit lacus vel nisl. Donec ante. Nullam posuere, est id tempor iaculis, massa purus gravida quam, sit amet malesuada purus tellus ac augue. Cras odio libero, vehicula nec, iaculis vel, molestie quis, nibh. Mauris quis sem. Morbi aliquam, tortor laoreet aliquam convallis, lectus pede ullamcorper elit, quis lacinia libero wisi pulvinar pede. Aenean vel mi eget tellus porttitor blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer nibh justo, gravida quis, commodo in, laoreet at, elit.
</p>
</div>
</body>
</html>- Thread starter
- #4
- Status
Similar threads
- Locked
- Question