Grow your CSS skills. Land your dream job.

Keeping floats from wrapping inside undefined width div

  • # November 21, 2012 at 5:14 am

    Hi!

    I’m having a problem which I’m not sure has a solution…

    Example: (@codepen: http://codepen.io/anon/pen/hJqtC)

    <html>
    <div style="position: relative; width: 200px; height: 200px; border: 1px solid black; overflow: visible;">
    <div style="position: relative; left: 10px; top: 10px; border: 1px solid green;">
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="position: relative; width: 20px; height: 20px; background-color: blue; float: left; border: 1px solid red;"></div>
    <div style="clear: both;"></div>
    </div>
    </div>
    </html>

    I would like the squares to align and don’t wrap.
    Is it even possible?

    Thankful for any help! =)

    # November 21, 2012 at 5:33 am

    What do you mean by ‘not wrap’?

    …and what is the purpose of this

    # November 21, 2012 at 5:40 am

    woah use css classes. and http://stackoverflow.com/questions/5616360/stop-floating-divs-from-wrapping

    # November 21, 2012 at 5:40 am

    Hi Paulie

    “Not wrap” – As you can see at the codepen-example the last two squares wraps to the second “row”. I want them all to align on the same row.

    This is just a simplified example of a much larger web application that I develop.
    But I narrowed it down to the actual problem. Within the application we have a ‘outer’ div (view) which has a defined with (in this example 200px) and I want to have a div inside it with content determining the width of that div instead of defining the width but it still should overflow the outer div. As it does if I specify a width.

    # November 21, 2012 at 5:52 am

    Wow…that’s weird but WTH…http://codepen.io/Paulie-D/pen/kqzlj

    # November 21, 2012 at 5:56 am

    Toxic: I do =) Not just in this example.

    Thank you Toxic.
    Created a new example with inline-block: http://codepen.io/anon/pen/nxeFi

    The problem now is tampering with the extra spacing from inline-block.
    But I found a post/article covering that topic here on css-tricks.

    # November 21, 2012 at 6:01 am

    Wait…do you want these horizontally aligned as in your first example or stacked on top of each other as in your second?

    # November 21, 2012 at 6:01 am

    Thank you Paulie.

    I’ll try to use absolute positioning on the innerdiv ..
    I’m not sure why I have relative atm ,, but I’m going to investigate it.

    I’m not sure how others feel .. but if I look back on my life as a web-programmer you can divide it into three periods (eras) regarding UI-structure.

    1. only tables
    2. only absolute positioned divs
    3. only relative positioned divs

    I think I’ll have to start combining era 2 & 3 =)

    # November 21, 2012 at 6:02 am

    Paulie: aligned
    If you reload the link it should be correct now. wrote block-inline instead of inline-block at first..

    # November 21, 2012 at 6:03 am

    So does my earlier Codepen not work somehow?

    http://codepen.io/Paulie-D/pen/kqzlj

    # November 21, 2012 at 6:06 am

    >only tables
    only absolute positioned divs
    only relative positioned divs
    I think I’ll have to start combining era 2 & 3 =)

    You don’t really want to be doing that at all IMO.

    You need to learn floats and how they work.

    It’s just my opinion…but using positioning (relative or absolute) has its place but should ONLY be used to create specific effects…it should be used sparingly if at all.

    Others might disagree.

    # November 21, 2012 at 6:39 am

    Now I’ve learned that floats don’t wrap if they are inside an absolute positioned div, if the wrapper for that div is positioned static….
    Which can be a problem for me..
    I’ll have to experiment a little..

    I think it’s strange that the wrapper div can’t be ‘relative’ or ‘absolute’?
    Any thoughts on that?

    # November 21, 2012 at 7:00 am

    Float’s won’t wrap inside ANY div whether absolutely positioned or not UNTIL the div has a specified width or the viewport gets too small.


    My question is “Why does the wrapper div NEED to be positioned relative or absolute?”

    # November 21, 2012 at 7:43 am

    Paulie

    I’m not sure it HAS to be relative or absolute .. it’s just that its not a small web application .. almost 10mb of pure perl+html+css+js so it’s not easy to say if I can change the structural layout without affecting things.

    # November 21, 2012 at 7:48 am

    Then I guess I can’t help you any further.

    If the wrapper IS positioned relative…what happens if you remove that property?

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".