Posted 2 years ago #
hi
the vertical-align="top" seems to only work for one line of text. which from what i have read is how it should work.
how do i have just one box with a top right large image and then variable length text that
a. wraps around the image as in printed media
b. introduces '...more' functionality half way through the text
that would really help. otherwise i'm going back to html and IE6!!!
add more divs .
#div 1 (contains image and text)
-- #div 2 (contain image)
#div 1 {
width : wahtever% ; /**Bigger then image and #div2**/
}
#div 2 {
float :left;
}That is it -
if you really want to over-do you can add
{
clear:none;
}
Posted 2 years ago #
That's what I thought but I can't get it to work for the life of me. there needs to be multiple lines of wrapping text down the side of the image which then continues underneath the image.
<div id="container">
<div id="content" >
<div id="floatingimg"><img src="images/home.jpg"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis quis lacus suscipit placerat. Donec porttitor vehicula fermentum. etc etc...a lot of text.
</div>
</div>
<div id="sidebar" >Menu</div>
</div>#content {
min-width: 478px;
min-height:700px;
float: left;
}
#content floatingimg {
width: 249px;
height: 369px;
float: left;
min-height:700px;
margin-right: 200px;
}
Posted 2 years ago #
i've tried with the <p> bits as well but can't get it to work.
Float:left; is all you need .
in your code, the <p> element (inline) with the text is INSIDE the #floatingimg id
further more, you can not declare 2 ID´s and then this :
#content floatingimg {
width: 249px;
height: 369px;
float: left;
min-height:700px;
margin-right: 200px;
}either use commas, or in your case, you MUST seperate them.
Alco , do not use ID , but classes, because i immagine you would want MORE then one image on a page.
#content .floatingimg
Posted 2 years ago #
Sorted, thank you very much
This topic has been closed to new replies.
