Jump to content

Aligning An Image Right... With Text


jgallaway81
 Share

Recommended Posts

Website-in-question: http://css.anarr.com-------------------------------------------------Images In this directory, are two images... "current" is how the site currently renders with its current CSS. "Wanted" is what I'm looking to accomplish... and what I WAS able to do with presentation HTML tags & attributes. Please help.If I try to float the image to the right, then the footer box ends up partially under the image.

Link to comment
Share on other sites

If you want text to the left of #rightside, it should be in a div or <p> element, and it should be written so it follows #rightside in your HTML document. It should have no width-dimension defined.The #tailend element should have a clear:both property, but no float property. IE float influence tends to persist long after it should, and the clear property will nullify that.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Play with this, for example. Just make a complete document out of it, for testing. Everything listed under "cosmetics" has nothing to do with the essential layout.

#right {   float: right;   /* cosmetics */   margin: 0px 0px 10px 20px;   text-align: center;   width: 200px;   height: 80px;   line-height: 80px;   background-color: #faa;   border: solid 1px #777;   display: inline;}#content {   /* cosmetics */   font-family: Verdana, Arial, sans-serif;   font-size: 12px;   line-height: 1.3em;   text-align: justify;}#footer {   clear: both;   /* cosmetics */   height: 2em;   line-height: 2em;   text-align: center;   background-color: #ddd;   border: solid 1px #777;}

<body>   <div id="right">IMAGE</div>   <div id="content">	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at justo ultrices magna faucibus sagittis. Aliquam eu velit elit, eu lobortis odio. Fusce in leo quis mauris facilisis faucibus. Integer aliquet felis ut sapien gravida ut dictum tellus tincidunt. Integer leo sapien, fermentum at ultrices ac, venenatis ac velit. Maecenas non tortor ac nibh consectetur vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum dictum purus a molestie. Nulla quam massa, tempor bibendum eleifend non, cursus vel turpis. Nullam quis purus a est ullamcorper ornare vitae nec lacus. Vestibulum tempus dignissim dolor sed posuere. Quisque at nibh quis lorem rhoncus fringilla. Maecenas at massa eros. Sed lectus mauris, faucibus a rutrum a, hendrerit et nisi. Donec ac faucibus lectus. In imperdiet consectetur lacus vitae pharetra. Donec cursus malesuada metus, at volutpat diam mattis ut. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sed sem non nulla rhoncus pellentesque. Nunc at lacus nunc. Donec ullamcorper urna eget nibh sodales tristique mollis felis vulputate. Duis orci purus, malesuada id tristique id, iaculis sed mauris.</p>   </div>   <div id="footer">FOOTER</div></body>

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...