SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    Lancaster
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with 'floating' (I'm sinking!)

    I want to 'float' some text round a <div>, and seem forever doomed to get it wrong.

    Have a look at this: http://www.webteachweblearn.com/fmtps/trial_3.html

    The attached style sheet is this:
    http://www.webteachweblearn.com/fmtp...for_trial3.css

    I want the text in #content to 'float' round the div #draw-attention, and just can't get it to work.

    Can anyone help, please?

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ian Simpson
    Help with 'floating' (I'm sinking!)
    You cannot float a absolutely positioned box. Just get rid of the 'position:absolute' (and 'left' and 'top' since they are useless without the former). This ought to work:
    Code:
    #draw-attention{
    	background: #DFEFF7;
    	border: thin;
    	border-left: dashed 2px #000000;
    	border-top: dashed 2px #000000;
    	float: right;
    	height: 100px;
    	margin: 3em;
    	overflow: scroll;
    	padding: 3px 3px 3px 3px;
    	text-align: left;
    	width: 300px;
    }
    Oh and by the way, it's the box that 'floats' so the text can 'wrap' around it .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Zoef is correct and also you will need to move the whole draw-attention div into the middle of the text otherwise the text will have nothing to float around.

    Usually a float will be the first element in the div so that the other content will float around it. However if you want your float in the middle of the text then you will need to place the div in the middle.

    A floated element will float to one side of the parent container and as high as it is allowed by other content.

    Hope this helps.

    Paul

  4. #4
    SitePoint Member
    Join Date
    May 2003
    Location
    Lancaster
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.... working on it.....

  5. #5
    SitePoint Member
    Join Date
    May 2003
    Location
    Lancaster
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorted: many thanks! The cheque is in the post


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •