bakum
asked on
img and text block in a line.
Hi,
I have a series of H2 elements, sized 190w X 34h that we want to have as look as follows:
the far left of the H2 is a square graphic, 34x34, and then to the right of the graphic is supposed to be a block of text. The text should layout entirely to the left of the H2, centered vertically. All I can get it to do, though, is get it to either wrap below the image entirely and left justify, which is wrong, or have the first line of text aligned with the bottom of the graphic and then the rest wraps below the graphic and justifies left.
Thanks in advance!
-mb
This is the code for the HTML:
<div id="columnOne"> <--container div holds a few of these child divs.
<div class="featuredContent"> <--container div holds a few of these H2's in a column along with some other stuff
<h2 class="icon">
<img src="/images/callout/cfp_i con.gif" /><p>Text should go here and it should wrap like this which would be nice.</p>
</h2>
</div>
</div>
Here is the CSS for the elements:
#columnOne {
float:left;
width:200px;
background-color:#ffffff;
min-height:1051px;
border-right:1px solid #d6d6d6;
padding:auto;
}
#columnOne .featuredContent {
width:190px;
}
#columnOne .featuredContent h2.icon {
text-align:left;
padding: 0px;
margin:0px;
}
#columnOne .featuredContent h2.icon img {
display:inline;
margin:0px;
}
#columnOne .featuredContent h2.icon p {
display:inline;
vertical-align:top;
margin:0px;
}
-------------------------- ----------
|IIIIIIIII Text should go here |
|IIIIIIIII and it should wrap like|
|IIIIIIIII this, which would be | <-- It's supposed to look like this
|IIIIIIIII nice. |
-------------------------- ----------
-------------------------- ----------
|IIIIIIIII |
|IIIIIIIII |
|IIIIIIIII | <-- but it looks like this....
|IIIIIIIII Text should go here |
|and it should wrap like this, |
|which would be nice. |
-------------------------- ----------
-------------------------- ----------
|IIIIIIIII |
|IIIIIIIII |
|IIIIIIIII | <-- or this
|IIIIIIIII |
|Text should go here and(etc.)|
-------------------------- ----------
I have a series of H2 elements, sized 190w X 34h that we want to have as look as follows:
the far left of the H2 is a square graphic, 34x34, and then to the right of the graphic is supposed to be a block of text. The text should layout entirely to the left of the H2, centered vertically. All I can get it to do, though, is get it to either wrap below the image entirely and left justify, which is wrong, or have the first line of text aligned with the bottom of the graphic and then the rest wraps below the graphic and justifies left.
Thanks in advance!
-mb
This is the code for the HTML:
<div id="columnOne"> <--container div holds a few of these child divs.
<div class="featuredContent"> <--container div holds a few of these H2's in a column along with some other stuff
<h2 class="icon">
<img src="/images/callout/cfp_i
</h2>
</div>
</div>
Here is the CSS for the elements:
#columnOne {
float:left;
width:200px;
background-color:#ffffff;
min-height:1051px;
border-right:1px solid #d6d6d6;
padding:auto;
}
#columnOne .featuredContent {
width:190px;
}
#columnOne .featuredContent h2.icon {
text-align:left;
padding: 0px;
margin:0px;
}
#columnOne .featuredContent h2.icon img {
display:inline;
margin:0px;
}
#columnOne .featuredContent h2.icon p {
display:inline;
vertical-align:top;
margin:0px;
}
--------------------------
|IIIIIIIII Text should go here |
|IIIIIIIII and it should wrap like|
|IIIIIIIII this, which would be | <-- It's supposed to look like this
|IIIIIIIII nice. |
--------------------------
--------------------------
|IIIIIIIII |
|IIIIIIIII |
|IIIIIIIII | <-- but it looks like this....
|IIIIIIIII Text should go here |
|and it should wrap like this, |
|which would be nice. |
--------------------------
--------------------------
|IIIIIIIII |
|IIIIIIIII |
|IIIIIIIII | <-- or this
|IIIIIIIII |
|Text should go here and(etc.)|
--------------------------
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER