ansaurus

Question

Answer 1

+1 A:

Here's a very simple example of how to do what you want (using inline styles):

<div>
  <div style="height:6px;width:500px;background-color:#3399CC;"></div>
  <div style="clear:both"/>
  <div style="float:left"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/&gt;&lt;/div&gt;
  <div style="float:left">Your Text Here</div>
</div>
<div style="clear:both"/>

You can test this code and try editing it in real time here: http://htmledit.squarefree.com/.

Gdeglin 2009-03-31 04:38:58

Answer 2

+1 A:

Try creating a html page with the following code:

<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
    margin-right: auto;
    margin-left: auto;
    width: 200px;
    height: 200px;
    background: #acf;
}
#header {
    background: #f98;
    padding-bottom: 1px;
}
#container img {
    background: #000;
    float: left;
    padding: 10px;
    margin: 10px;
}
</style>
</head>
<body>
    <div id="container">
     <div id="header">
      <h1>Heading</h1>
     </div>
        <img src="image.jpg" alt="" height="25" width="25" />
        <p>Text text text</p>
    </div>
</body>
</html>

Jon Winstanley 2009-03-31 08:08:30

Answer 3

A:

Building on Jon. A 6px header is mighty darn small!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Div layout</title>
<style type="text/css">
/*<![CDATA[*/
#container {
  margin:0 auto;
  width:400px;
  height:300px;
  overflow:scroll;
  background:#acf;
  padding:0;
}
#container h1 {
  background:#f98;
  padding:0 0 1px 0;
  height:6px;
  font-size:2px;
  text-align:center;
  font-weight:normal;
  border:3px #FFA500 outset;
}
#container img {
  background:#000;
  float:left;
  padding:10px;
  margin:10px;
}
/*]]>*/
</style>
</head>

<body>
 <div id="container">
  <h1>Heading</h1><img src="image.jpg" alt="" height="25" width="25" />

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
  eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et
  ultrices posuere cubilia Curae; Nulla sit amet tellus vel augue
  hendrerit pellentesque. Aenean cursus, quam nec volutpat interdum, nibh
  sapien elementum mi, id accumsan neque risus a est. Praesent libero
  metus, tincidunt at, vulputate eu, vehicula at, arcu? Donec orci metus,
  ornare non, viverra vel, vehicula ac, dui. Aliquam erat volutpat. Fusce
  malesuada urna quis augue. Mauris in purus. Maecenas at est. Nunc
  vestibulum feugiat justo. Etiam nec urna. Nulla facilisi. Ut enim.
  Nullam sit amet mauris eu quam eleifend vestibulum! Cras lectus turpis,
  cursus nec, fermentum egestas, fermentum non, tortor.</p>
 </div>
</body>
</html>

BryanH 2009-04-01 18:28:11

ansaurus

tags:

views:

answers:

DIV with Image and Text

related questions