CSS help!

  Revi 09:30 23 Nov 2005

Using CSS, I am trying to get a picture/image placed on the left side of the canvas (screen) and on the right hand side a text material. Whatever I am doing, either the picture is coming above or below the text and not side by side. I want the picture & the text to cover 80% width of the screen and 100% height. Would it be possible for any one to give me the exact coding for the HTML & the CSS pages to achieve the above result? Thanks.

  PurplePenny 11:38 23 Nov 2005

This is covered in the W3Schools tutorial on CSS. There are some examples there too:

click here

  Revi 12:07 23 Nov 2005

Haven't found my answer there, thanks anyway!

  PurplePenny 15:29 23 Nov 2005

You do it using CSS float as in the first example on that page I linked to.

I assume that you don't want the text to flow under the image, as it does in that example, in which case you need to wrap both the text and the image in a <div> and then give CSS float properties to the image. Wrap the entire page in another div with the CSS property {width: 80%}.

There is an example of what I mean in the same tutorial. It is their 7th example "Creating a homepage without tables: Use float to create a homepage with a header, footer, left content and main content."

Here is a direct link to it:

click here

  djinn 19:18 23 Nov 2005

Post a link to what you have so far - then someone will be able to help you better.


  Revi 15:42 24 Nov 2005

Sorry, I do not have the facility to post this link.

  PurplePenny 21:04 24 Nov 2005

Everything you need to know is there in that "Creating a homepage without tables" example. If you don't want a header and a footer just miss out those divs.

I have just started on CSS and I purchased "Spring into HTML and CSS" isbn 0-13-185586-7", bought it via Amazon. It has all you need with example pages. Works great!

  Revi 13:22 26 Nov 2005


  Revi 13:24 26 Nov 2005

Thanks, does the book have examples similar to my requirement given above? Grateful for a speedy answer.

  djinn 17:46 26 Nov 2005

I bought this a couple of weeks back - it's the biz.......

Bulletproof Web Design by Dan Cederholm.

This is a great book - probably requires some previous knowledge - but great for CSSP, and yes does cover roughly what you want to do.

You'll be positioning elements all over the place (and I mean that in the best possible way) after reading this.



This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Xiaomi Mi Mix 2 review

What went wrong at the Designs of the Year 2017

iPhone X news: Release date, price, new features & specs

Comment utiliser Live Photos ?