Results 1 to 16 of 16
  1. #1

    Question CSS: float:left and right:0 ?

    Hi!

    This is an extremely simple problem but the solution is pretty tricky.

    I have a wrapper containing:
    • A float:left with some text so I can't predict the width
    • Another float:left that I want to extend to the right of the wrapper (a sort of right:0)


    Is there any way to do this without the use of table?

    Thanks!

  2. #2
    Quote Originally Posted by mrbark View Post
    Hi!

    This is an extremely simple problem but the solution is pretty tricky.

    I have a wrapper containing:
    • A float:left with some text so I can't predict the width
    • Another float:left that I want to extend to the right of the wrapper (a sort of right:0)


    Is there any way to do this without the use of table?

    Thanks!
    float:right; ? or float:left; with left:10px; or margin-left:10px; instead ?

    as for the width of the text, you can set a max width or use percentage for each of these divs ?
    - SimpleCRM Coming Soon!
    ModulesBakery - Custom Software & Front-End Development (PHP & MySQL OR Oracle Databases, Zend Framwork, Symfony).

  3. #3
    Quote Originally Posted by QualityMarkup View Post
    float:right; ? or float:left; with left:10px; or margin-left:10px; instead ?

    as for the width of the text, you can set a max width or use percentage for each of these divs ?
    Unfortunately I don't know the width of the text div, so I cannot use any of these.

  4. #4
    Quote Originally Posted by mrbark View Post
    Unfortunately I don't know the width of the text div, so I cannot use any of these.
    You have to set how much width you want to give to both areas (the left area and the right area), e.g:

    .rightarea {
    width:50%;
    float:right;
    }
    .leftarea {
    width:50%;
    float:left;
    }
    - SimpleCRM Coming Soon!
    ModulesBakery - Custom Software & Front-End Development (PHP & MySQL OR Oracle Databases, Zend Framwork, Symfony).

  5. #5
    QualityMarkup : do you really read threads on Web Hosting Talk or you just post to get some backlinks?
    I see few relevant posts in your statistics/history.
    Now people see replies on my topic and will think I had an answer...

    If an admin can remove all our replies. THANKS!

  6. #6
    Quote Originally Posted by mrbark View Post
    QualityMarkup : do you really read threads on Web Hosting Talk or you just post to get some backlinks?
    I see few relevant posts in your statistics/history.
    Now people see replies on my topic and will think I had an answer...

    If an admin can remove all our replies. THANKS!
    is this for real ? i tried to help you and this is what i get ?

  7. #7
    Join Date
    May 2004
    Location
    Toronto, Canada
    Posts
    5,105
    I think he is just trying to help. If the post doesn't help you then just ignore it.
    CloudNexus Technology Services
    Managed Services

  8. #8
    All right.
    I'm sorry then, it just looked really irrelevant to me.
    I apologize

  9. #9
    Can you tell us more about what you're trying to achieve?
    Here's a fiddle with what I think you've said so far:

    http://jsfiddle.net/avibodha/MG8kL/

    Does the text in the left div extend to push the right div down? Is that the problem?
    Last edited by avibodha; 08-04-2014 at 03:38 PM.

  10. #10
    Quote Originally Posted by avibodha View Post
    Can you tell us more about what you're trying to achieve?
    Here's a fiddle with what I think you've said so far:

    http://jsfiddle.net/avibodha/MG8kL/

    Does the text in the left div extend to push the right div down? Is that the problem?
    http://jsfiddle.net/MG8kL/3/
    -> This is an updated version of your code (thank you!)
    What I need is that the red box extends to the right so it sticks to the green border.
    So the content in red does not matter, but the content in blue pushes red (which therefore becomes narrower)
    As if red was float:left and right:0

    IMO there is no other solution than a table, but...

  11. #11
    Join Date
    Aug 2005
    Posts
    3,587

  12. #12
    Remove the float on the left one. And add the float right on the right one. The right div should come first.
    http://jsfiddle.net/s8942/

    If you are really looking for table like behavior... just make a table.
    I have no sig to spam.

  13. #13
    Join Date
    Mar 2012
    Location
    United Kingdom
    Posts
    1,136
    Quote Originally Posted by QualityMarkup View Post
    You have to set how much width you want to give to both areas (the left area and the right area), e.g:

    .rightarea {
    width:50%;
    float:right;
    }
    .leftarea {
    width:50%;
    float:left;
    }
    This is the best way op. We use it, but we don't put the width on there.
    Sapatana.eu ILoveBilling
    120Gbps DDoS Protection on Shared Hosting, Reseller Hosting, XEN Windows and Linux VPS, Domains, SSL Certificates
    PayPal | BitPay (BitCoin) | UK Bank Transfer | International Bank Transfer

  14. #14
    Thank you guys for the replies.
    Ok that is not what I'm trying to do.
    I need the left border of RED to stick with right border of BLUE, and right border of RED to still stick with GREEN border, then the size of both RED & BLUE are determined by the content in BLUE.
    Quote Originally Posted by Grumps View Post
    If you are really looking for table like behavior... just make a table.
    Yes, I guess that is unfortunately the only option.
    After all there's no evil in table it's just a tag like another!

  15. #15
    I think you just need to move the background to the wrapper then, like so:

    http://jsfiddle.net/avibodha/MG8kL/6/

    Or maybe there's more to it than that?

  16. #16
    Quote Originally Posted by avibodha View Post
    I think you just need to move the background to the wrapper then, like so:

    http://jsfiddle.net/avibodha/MG8kL/6/

    Or maybe there's more to it than that?
    ah, no no, I was just using colors to see the divs. But I really need that div to be what is red, because yes, there is way more after that.

    Ok, as far as I know there is no way without a table.
    So in the end, tables are not so evil

Similar Threads

  1. css float issues
    By christianstogether in forum Web Design and Content
    Replies: 13
    Last Post: 05-15-2014, 06:51 PM
  2. how to image float left and bottom with text wrap?
    By wetpwet in forum Web Design and Content
    Replies: 1
    Last Post: 12-04-2013, 06:39 PM
  3. CSS - clear: both or float: none?
    By mounty in forum Web Design and Content
    Replies: 8
    Last Post: 04-11-2011, 11:26 PM
  4. CSS Float problems
    By kendalbren in forum Web Design and Content
    Replies: 5
    Last Post: 08-16-2009, 10:37 AM
  5. CSS Float Problem...
    By Ryuumeiko in forum Web Design and Content
    Replies: 3
    Last Post: 04-19-2005, 07:44 AM

Tags for this Thread

Posting Permissions

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