Floating div

Discussion in 'HTML' started by Vahid, Mar 2, 2007.

  1. Vahid

    Vahid Guest

    Hi,

    What is the attribute for floating div? I want to have a <div> in a
    page that floats at left.

    Regards,
    Vahid
     
    Vahid, Mar 2, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed "Vahid" <>
    writing in news::

    > Hi,
    >
    > What is the attribute for floating div? I want to have a <div> in a
    > page that floats at left.
    >
    > Regards,
    > Vahid
    >
    >

    div {float:left}


    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Mar 2, 2007
    #2
    1. Advertising

  3. Vahid

    Colin Wilson Guest

    for Images try:

    pull image
    Sample Use
    (In the html file)
    <p><div class="pull-image-200"><img src="../images/amsterdam_mosque.jpg"
    width="200" height="185"><br>text here</div><p>
    (in the .css file)
    DIV.pull-image-400{
    margin-top: 1em;
    float: right;
    margin-left: 1em;
    width: 400px;
    text-align: right;
    font-size:12px;
    font-color: #c0c0c0;
    }
    DIV.pull-image-300{
    margin-top: 1em;
    float: right;
    margin-left: 1em;
    width: 300px;
    text-align: right;
    font-size:12px;
    font-color: #c0c0c0;
    }
    DIV.pull-image-200{
    margin-top: 1em;
    float: right;
    margin-left: 1em;
    width: 200px;
    text-align: right;
    font-size:12px;
    font-color: #c0c0c0;
    }
    For Text try the following in your .css file

    DIV.pull-left{
    background:#ffffdd;
    border: 1px dotted #333333;
    float: left;
    margin: 1em;
    margin-left: .1 em;
    width: 250px;
    padding: 1em; font-family: Georgia;
    font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 24px;

    }

    DIV.pull-right{
    background:#ffffdd;
    border: 1px dotted #333333;
    float: right;
    margin: 1em;
    margin-right: .1 em;
    width: 250px;
    padding: 1em; font-family: Georgia;
    font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 24px;

    }

    In your html file put:
    <div class="pull-right"><center><font
    size="300%">&sect;</font></center><br></span> text here </div>
    <div class="pull-left"><center><font
    size="300%">&sect;</font></center><br></span> text here </div>

    Some more with all the coding in the HTML file (bad idea!)
    <!-- pull quote number one -->
    <div id="pullquotefirst" style="margin-top: 1em; margin-left: 1em;
    margin-bottom: 1em; clear: left; font-size: 20px; font-family: Verdana;
    display: block; width: 530px;"><span id="quotesleftfirst" style="font-size:
    500%; color: #000000; margin-top: 0em; float: left; font-family:
    serif;">&ldquo;</span><span id="quotesrightfirst" style="font-size: 500%;
    float: right; font-family: serif; margin-top: .75em;">&rdquo;</span><div
    id="dropcapfirst" style="float: left; font-size: 600%; font-family: Georgia;
    font-weight: bold; color: #ccccdd;">79</div><span style="margin-top:
    1em;">percent of our test users always scanned any new page they came
    across; only 16 percent read word-by-word.</span></div>
    <!-- pull quote number two" -->
    <div id="pullquotesecond" style="margin: 1em; width: 550px; font-size: 18px;
    font-family: Georgia; display: block; color: #000033; text-align:
    right;"><span id="dropcapsecond" style="font-size: 300%; font-family:
    Georgia; color: #ddcccc; line-height: 50px;">All of a sudden</span><br />we
    have a paragraph stuck out of context and making little sense.</div>
    <!--pull quote number three-->
    <br><div id="pullquotethird" style="float: right; margin-right: 0em;
    margin-left: 24px;
    margin-bottom: 1em; width: 160px; font-family: Helvetica, Arial; font-size:
    28px; color: #336633; text-align: right; line-height: 24px; display:
    inline;">...this may be more desirable when you consider <b>the deplorable
    state of font rendering</b> on some systems... <img
    src="e:\nsm\photos\commander2.jpg"><br>Commander Schoep</div>
    <!--pull quotes number four -->
    <div id="pullquotefourth" style="background: #ffffdd; border: 1px dotted
    #333333; float: left; margin: 1em; margin-left: .1 em; width: 250px;
    padding: 1em; font-family: Georgia; font-size: 18px; color: #333333;
    text-align: center; line-height: 24px;"><span id="star" style="font-size:
    300%; display: block;">&sect;</span><br />maintain pull quote consistency
    within a single article or document (unlike this one.) <img
    src="e:\nsm\photos\commander2.jpg"></div>
    <!-- pull quote number five -->
    <div id="pullquotefifth" style="border-bottom: 1px dotted #333333;
    margin-top: 20px; margin-bottom: 1em; width: 800px; font-family: Times;
    font-size: 36px; color: #332233; text-align: right;"><span id="dropcapfifth"
    style="font-size: 200%; color: #222222; line-height: 120px;"><span
    id="bigcap" style="font-size: 200%;">&raquo;</span>I do not intend</span><br
    />to make sure that <b>these CSS pull quotes</b> work properly in every
    browser.</div>

    <!-- start pullquote -->
    <table border=0 width=50% bgcolor=#FFFFFF cellspacing=0 cellpadding=10
    align=RIGHT><tr align=center><td><img
    src="/daily/common/images/gold_rule.gif" height=1 border=0 WIDTH=100%
    vspace=5><br><font face=Verdana size=6
    color=#>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I</font><font face=Arial size=3
    color=#003366 class=callout>nvite the airline<br>to buy you a
    meal.<br><br><img src="/daily/common/images/gold_rule.gif" height=1 border=0
    WIDTH=100% vspace=5><br></td></tr></table>
    <!-- end pullquote -->
    <style type="text/css">
    p.pullquote {background-color: #315b7f;
    color: #f3f1f4;
    padding: 2%;
    font-style: italic;
    font-size: 1.5em;
    border: medium #4a88be solid;
    margin-left: 3em;
    margin-right: 3em;}
    p.pullquote1 {background-color: #315b7f;
    color: #f3f1f4;
    padding-bottom: 5%;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 5%;
    font-style: italic;
    font-size: 1.5em;
    border: medium #4a88be solid;
    margin-left: 3em;
    margin-right: 3em;}


    </style>
    <p class="pullquote">&quot;To really understand style sheets you must
    understand the difference between structural and presentational
    markup.&quot;</p>
    and
    <p class="pullquote1">If I set the padding as shown below, my pull-quotes
    would look like this, with more space above and below the text, and less
    space to the left and right.</p>
    Images
    <div class="pull-image-200">
    <div class="pull-image-300">
    <div class="pull-image-400">



    "Vahid" <> wrote in message
    news:...
    > Hi,
    >
    > What is the attribute for floating div? I want to have a <div> in a
    > page that floats at left.
    >
    > Regards,
    > Vahid
    >
     
    Colin Wilson, Mar 2, 2007
    #3
  4. Vahid

    John Hosking Guest

    Colin Wilson wrote:

    [snipped 7KB of bizarre top-posted, um, stuff]

    > "Vahid" <> wrote in message
    > news:...
    >
    >>Hi,
    >>
    >>What is the attribute for floating div? I want to have a <div> in a
    >>page that floats at left.
    >>


    Colin, did you forget your medications again? ;-)

    --
    John
     
    John Hosking, Mar 2, 2007
    #4
  5. Colin Wilson wrote:

    > Images
    > <div class="pull-image-200">
    > <div class="pull-image-300">
    > <div class="pull-image-400">
    >


    WTF?
    The OT asked a simple question, and all he gets is your reply... uff

    bernhard


    --
    www.daszeichen.ch
    remove nixspam to reply
     
    Bernhard Sturm, Mar 2, 2007
    #5
  6. Vahid

    Andy Dingley Guest

    On 2 Mar, 04:50, "Vahid" <> wrote:

    > What is the attribute for floating div?


    No single attribute, this is a complex topic.

    Best explanation I know is over here:
    <http://brainjar.com/css/positioning/>
    You should read all of it, and carefully.
     
    Andy Dingley, Mar 2, 2007
    #6
  7. Vahid

    Vahid Guest

    On Mar 2, 3:57 am, "Andy Dingley" <> wrote:
    > On 2 Mar, 04:50, "Vahid" <> wrote:
    >
    > > What is the attribute for floating div?

    >
    > No single attribute, this is a complex topic.
    >
    > Best explanation I know is over here:
    > <http://brainjar.com/css/positioning/>
    > You should read all of it, and carefully.


    Thanks. It is a good resource.
     
    Vahid, Mar 2, 2007
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tamlyn Rhodes
    Replies:
    3
    Views:
    1,005
    Andy Dingley
    Feb 26, 2004
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    776
  3. teeshift
    Replies:
    2
    Views:
    274
    Chris Pearl
    Dec 1, 2006
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    208
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page