Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Keeping floats from wrapping inside undefined width div

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • Author
    Posts
  • November 21, 2012 at 5:14 am #40908
    jocke76
    Member

    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 #115005
    Paulie_D
    Member

    What do you mean by ‘not wrap’?

    …and what is the purpose of this

    November 21, 2012 at 5:40 am #115008
    jocke76
    Member

    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 #115010
    Paulie_D
    Member

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

    November 21, 2012 at 5:56 am #115011
    jocke76
    Member

    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 #115012
    Paulie_D
    Member

    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 #115013
    jocke76
    Member

    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 #115014
    jocke76
    Member

    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 #115015
    Paulie_D
    Member

    So does my earlier Codepen not work somehow?

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

    November 21, 2012 at 6:06 am #115016
    Paulie_D
    Member

    >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 #115019
    jocke76
    Member

    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 #115020
    Paulie_D
    Member

    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 #115022
    jocke76
    Member

    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 #115023
    Paulie_D
    Member

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

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

    November 21, 2012 at 9:56 am #115038
    jocke76
    Member

    Ok .. the story continues..

    I’ve now managed to change the main structure so that the content can stretch outside enclosing divs..

    Now the problem is the browser windows size ..

    Please have a look at this example: http://codepen.io/anon/pen/xbJjg
    If the browser window is made narrower the folding begins..

    Any ideas?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 25 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.