Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating Paragraphs? :(

    Hi guys, I'm taking webpage design as an elective and they're asking us to float a paragraph in css... How would i do that?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Cheer_Babii95 View Post
    Hi guys, I'm taking webpage design as an elective and they're asking us to float a paragraph in css... How would i do that?
    Using the float rule on your <p> tag

    p {float: left;}

  • #3
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    If you have a bunch of block level elements such as a paragraph. Then when listed, they will be shown one above the other.

    In order to have them alongside each other, you then call on floats.

    Code:
    <p>Paragraph One</p><p>Paragraph Two</p>
    To float those paragraphs you can simply do:

    Code:
    p{float:left;}
    You can float either left or right, etc etc.

    Good luck

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thankyou!(: ugh im terrible at this class!

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Cheer_Babii95 View Post
    thankyou!(: ugh im terrible at this class!
    What is your major? You said you took this as an elective. It gets easier...CSS is hard even for experienced web designers.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    haha im only a tenth grader that goes to the number 1 high school in PA and its rediculous so then I found this website and it's really helping.

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    wow cool that they teach these types of classes in high school now!...lol wish they had that when I was in high school. Hope you enjoy it! and good luck.

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    haha yea it is(: and thanks haha i'll try

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    or more flexible than digitalclubb's suggestion, could be:

    Code:
    <p id='paragraph1'>Paragraph One</p>
    <p id='paragraph2'>Paragraph Two</p>
    You can now float each of them independently so, one could float right and the other float left:

    Code:
    p#paragraph1 {
    float:left;
    }
    p#paragraph2 {
    float:right;
    }
    if something has an id tag assigned to it in the html, the css begins with #
    if something has a class tag assigned to it in the html, the css tag begins with . [a dot]

    so the css would be .paragraph1 if I had used class='paragraph1' and it is as above because I used id='paragraph1'

    If the paragraphs all need the same (or they have some common) attributes, then you can use the generic p tag for a paragraph

    Code:
    p {
    float:left; 
    }
    and then add the other specific css elements beneath

    Code:
    p {
    float:left; 
    } 
    p#paragraph1{
    float:right;
    }
    This means that the p tag attrributes, will cascade through all paragraphs, irrespective of calss or id. But if you also assign a class or id, to some of the paragraphs, the attributes set, will take precedence over the default/generic attributes.

    so here's a practical explanation of that

    Code:
    <p id='paragraph1'>Paragraph One</p>
    <p class='paragraph2'>Paragraph Two</p>
    
    
    p {  /* generic css for all paragraphs */
    float:left; 
    } 
    p#paragraph1{ /* remember 'id' uses a # */
    float:right;
    }
    p.paragraph2{  /* remember 'class' uses a . */
    background: #ccc; 
    }
    (comment out your css with /* these jobbies */ ).

    So, all paragraphs are set to float left and paragraph1 overrides it with its own specific float right.

    paragraph2 floats left because that is the default setting for all paragraphs but it also has a background color of #ccc (grey). only that paragraph shows that #ccc background.

    If you wanted both paragraphs to have a grey background color, you would put background:#ccc; into the p tag and remove the 'background' from their respective paragraph-specific css blocks.


    hth

    bazz
    Last edited by bazz; 11-05-2010 at 03:39 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

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