Need help

Can any one please help me in that. Its not a frame. I have images but dont know how to make these 4 boxes. Left side in each box is a picture and on the right side its a text.

Thanks.
Page1.jpg
mustish1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mustish1Author Commented:
Do i need to create a table and inside each row should i create frames?
Mahesh BhutkarCommented:
You can easily do this using <table> <tr> <td> tag of html.

For images you have to fix the width & height.

you may required to use the following properties as well
width,height,rowspan
mustish1Author Commented:
ok its a table. I thought its some thing new in html5
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

mustish1Author Commented:
Can you please show one box with left side image and right side text. I will follow the rest with that code

<html>
<head>
<ttle></title>
<body>
<table border = "1" align = "center">
</table>
</body>
</html>
Big MontyWeb Ninja at largeCommented:
i wouldn't use tables, but rather DIVS and a little CSS. I recently did something similar, have a go at this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .image-container {
            margin: 20px 20px 0 0;  
            overflow: auto;
        }
        .image-thumb {
            float: left
        }
        .image-thumb img {
            display: block
        }
        .image-content {
            margin-left: 210px
        }
        .image-title {
            font-weight: bold;
            font-size: 200%
        }  
        
        #team {        
            margin-left: auto; margin-right: auto; width: 70%; font-family: Arial;
        }
    </style>
</head>
<body>
        <div id="team">
            <div class="image-container">
                <div class="image-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
                <div class="image-content">
                      content goes here
                </div>
            </div>

            <div class="image-container">
                <div class="image-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
                <div class="image-content">
                    more content would go here
                </div>
            </div>
           
        </div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mustish1Author Commented:
Thanks. But in the image it looks like little different. Its like one big long box and there is 4 rows in it
Big MontyWeb Ninja at largeCommented:
its just a starting point to where you're going. you'll need to style the image-content, probably add another div in there to hold the actual text so you can style the image-content to have a gray background
mustish1Author Commented:
I've requested that this question be closed as follows:

Accepted answer: 450 points for The_Big_Daddy's comment #a39780345
Assisted answer: 50 points for bonzermahesh's comment #a39778551
Assisted answer: 0 points for mustish1's comment #a39778571

for the following reason:

Thanks
Big MontyWeb Ninja at largeCommented:
this is NOT an objection, just a tip for the OP:

Instead of requesting the question to be closed, you may just hit the "Accept Multiple Solutions" link under any of the answers and divvy up the points that way. It's the same as what you did, except instantaneous
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.