1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Wrap text inside floated divs

Discussion in 'CSS' started by Kyriakos, Feb 22, 2013.

  1. #1
    hi,
    i have this html code:
    <div align="left" style="float:left;>blablabla...</div>
    <div align="left" style="float:right; width:70%;>blablabla...</div>
    Code (markup):
    the left floated div has not a width. so when the text inside it is large, it is not wrapped and the right div is going bellow the left div. it is possible to wrap the text when the left div is going to "touch" the right div?

    i have this sample (created in Photoshop)
    [​IMG]
    thanks in advance.
     
    Kyriakos, Feb 22, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    For that, you will have to give a width to that left div. You can also do it in percents so it fits with the parent container. For instance, 28% is good, you'll have 2% of space between them.

    However, there's another way to proceed.
    What you can do is float the left div ONLY, and fix it's width. Then, you give a hidden overflow to the right div. The left div's width is fixed, so it won't push the right div. The right one is fluid, you can also give it a min-width if you want to.

    There's the code :

    
    <div style="width:200px;float:left;border:1px solid #000; margin-right:10px;text-align:left">blablabla...</div>
    <div style="overflow:hidden;border:1px solid #000;text-align:left">blablabla...</div>
    Code (markup):
    Hope it helps
     
    Last edited: Feb 22, 2013
    wiicker95, Feb 22, 2013 IP
  3. Kyriakos

    Kyriakos Active Member

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    I want the left div to be free of witdth because in some cases i don't have a right div and i want the left div to be expanded at 100% of the table row. These divs are inside a table with multiple rows.
     
    Kyriakos, Feb 22, 2013 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    Although it's technically valid if not placed directly as a <table> child, being forced to put a div inside a table usually means that there is something terribly wrong with your markup.


    Well this doesn't make any sense. When there's only one div, you give it a 100% width, and when both are present, you cut its with down.
     
    wiicker95, Feb 22, 2013 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    I answered this here, about twenty minutes before wiicker95. There is a reason for cross-posting being inconsiderate. You wasted my time because you haven't responded to my suggestion, and you wasted wiicker95's time because you already had an answer.

    g
     
    kk5st, Feb 24, 2013 IP
  6. Kyriakos

    Kyriakos Active Member

    Messages:
    155
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    This is a different forum. I had to post to both of them for solving my problem.
     
    Kyriakos, Feb 24, 2013 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Other than true. You received workable answers on both forums, so only one was needed. Likewise, because of your selfishness, you caused those who would help you to be inconvenienced and took their time away from others seeking help.

    g
     
    kk5st, Feb 25, 2013 IP