anyone here fluent in css web design?

[Cerberus]

I\'m trying to fix a problem I\'m having.





when aligning the image to the right or left of the content box it is contained in, and there is not enough text to wrap around the image, the content box cuts behind the image in question.

is there any way of sorting it so that no matter how little text there is, the content box will fully enclose the image?

this is the css & html I am using for the parts on the screenshot

css & html code

anyone any ideas how to fix this?

The image is either floated right or aligned right.  The container needs to be clearfixed or simply add this before the closing div on the container:

< br clear="all" />

Should work, but if you want it to W3C validate you can use the former method.

Examined your code that you linked up..

Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam eget turpis
  consectetur iaculis. Curabitur laoreet tortor eu est semper et accumsan ante
  sodales. Quisque suscipit, nulla sit amet tristique egestas, neque urna sollicitudin
  purus, at auctor sapien mi quis magna. Proin pellentesque felis ac purus fermentum
  at mollis tellus placerat. Sed ornare, urna eu pretium venenatis, felis nisi
  varius nunc, sed aliquet nibh risus quis lacus. Nam fringilla ornare ligula
  et lobortis. Aliquam fermentum viverra sapien sit amet posuere.

or

Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam eget turpis
  consectetur iaculis. Curabitur laoreet tortor eu est semper et accumsan ante
  sodales. Quisque suscipit, nulla sit amet tristique egestas, neque urna sollicitudin
  purus, at auctor sapien mi quis magna. Proin pellentesque felis ac purus fermentum
  at mollis tellus placerat. Sed ornare, urna eu pretium venenatis, felis nisi
  varius nunc, sed aliquet nibh risus quis lacus. Nam fringilla ornare ligula
  et lobortis. Aliquam fermentum viverra sapien sit amet posuere.

...and add the CSS here to your stylesheet

[Cerberus]

Examined your code that you linked up..

 [IMG]http://www.psx2central.com/forums/images/testpic1.jpg[/IMG]Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam eget turpis
  consectetur iaculis. Curabitur laoreet tortor eu est semper et accumsan ante
  sodales. Quisque suscipit, nulla sit amet tristique egestas, neque urna sollicitudin
  purus, at auctor sapien mi quis magna. Proin pellentesque felis ac purus fermentum
  at mollis tellus placerat. Sed ornare, urna eu pretium venenatis, felis nisi
  varius nunc, sed aliquet nibh risus quis lacus. Nam fringilla ornare ligula
  et lobortis. Aliquam fermentum viverra sapien sit amet posuere.




 
or

 [IMG]http://www.psx2central.com/forums/images/testpic1.jpg[/IMG]Lorem
  ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam eget turpis
  consectetur iaculis. Curabitur laoreet tortor eu est semper et accumsan ante
  sodales. Quisque suscipit, nulla sit amet tristique egestas, neque urna sollicitudin
  purus, at auctor sapien mi quis magna. Proin pellentesque felis ac purus fermentum
  at mollis tellus placerat. Sed ornare, urna eu pretium venenatis, felis nisi
  varius nunc, sed aliquet nibh risus quis lacus. Nam fringilla ornare ligula
  et lobortis. Aliquam fermentum viverra sapien sit amet posuere.
 
...and add the CSS here to your stylesheet

thanks, that appears to work almost perfectly. it seems to narrow the contentshell box slightly in IE, but in firefox it\'s spot on.

Pretty cool. Can you do a pic of the fixed page?

[Cerberus]

Pretty cool. Can you do a pic of the fixed page?

yeah

http://surebrec.pwp.blueyonder.co.uk/test/

nothing special really, just basic stuff.

Is that a marquee tag I see????

Oh you poor poor bastard.

[Cerberus]

thanks.

I know marquees are old hat, but considering I\'m just tinkering around to pass the time, who gives a flying fuck? should I ever decide to actually use this layout for anything, do you honestly think I\'d use a marquee????

I\'m well aware that there are other alternatives, but to get an idea of an effect, sometimes it\'s best to go the low tech route before wasting time with javascript or other methods.

[videoholic]

What\'s wrong with a Marquee?  I have more of an issue with Latin being a dead language.  

Yeah I like it, the marquee caught my eye. It\'s probably ok because the rest of the design is so clean.

Also, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur pulvinar lorem, sit amet luctus metus bibendum non. Nam pretium lacinia erat, a viverra magna aliquam vitae. Morbi quis libero nec tellus gravida consequat. Nullam dignissim, arcu aliquam faucibus aliquam, ipsum nunc accumsan sapien, nec rhoncus massa metus non felis. Fusce sapien enim, pulvinar a facilisis vitae, interdum nec libero. Praesent ut neque sapien, at euismod ipsum. Pellentesque dictum rutrum elit, at tempus nunc tristique ac. Vivamus eu sollicitudin ligula. Sed eu velit nunc.

[Cerberus]

ok, another question, how do I vertically align text within a div?




the white text is where the text appears when I enter it, the grey text is where I want it to be.

I\'ve tried creating a custom class and setting the vertical alignment to text-bottom, but it doesn\'t seem to fix it. I also tried styling the h1 tag to do it, but that didn\'t work either.

this is the css & html:

#banner {
    height: 120px;
    padding: 0.5em;
    background-color: #000000;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}
h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 36px;
    vertical-align: bottom;
    color: #FFFFFF;
    font-style: italic;
    text-transform: capitalize;
    text-align: right;
}
 
 
     

     

this is some random text

 

 

If the DIV will always be changing height it will take the line-height "trick" as CSS2 has no proper way to handle vertical-aligning with text and containers with dynamic heights.

If the DIV is a static height (which it looks like it is) just do some absolute positioning, add these classes to your current stylesheet:

#banner { position:relative; }

#banner h1 { position:absolute; top:15px; right:20px; }

(remove all the text-align and vertical-align classes)