Forums

jocke76

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! =)

Paulie_D

What do you mean by 'not wrap'?

...and what is the purpose of this

   <div style="position: relative; left: 10px; top: 10px; border: 1px solid green;">

Do you mean this?

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

ToxicFire

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

jocke76

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.

Paulie_D

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

jocke76

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.

Paulie_D

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

jocke76

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.

only tables
only absolute positioned divs
only relative positioned divs

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

jocke76

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

Paulie_D

So does my earlier Codepen not work somehow?

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

Paulie_D

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.

jocke76

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?

Paulie_D

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?"

jocke76

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.

Paulie_D

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

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

jocke76

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?

jocke76

Ah! Found the solution myself! =)

Adding: white-space: nowrap; to the list-div (class="list") solved it!

Paulie_D

Wait..this is a list?

Frankly this sounds like a really strange design...I really can't see what the point would be.

Is it supposed to scroll horizontally or something?

Are the 'boxes' supposed to hold some content?

Perhaps some mock-ups of what you are trying to achieve would help us help you.

ToxicFire

why do i think this is a sidewards scrolling menu bar?

Paulie_D

Because you SEEM to want the 'boxes' to go off the screen at lower viewport sizes.

jocke76

Yes, it's actually a list. I just thought it would be cleaner in the initial example to use divs instead of ul's and li's. IMHO it wouldn't matter.

No, it's not a menu. It's basically a table but somewhere sometime (around 5-6 years ago) I decided to use divs and uls instead of tables. If I remember correct it was because I couldn't trust tables cells to display in a certain width, therefor I couldn't have a scrollable table with the table headers in another table above. (since the widths could be different).

Anyhow.. I've expanded the example to include some of the surrounding design in this example: http://codepen.io/anon/pen/Hgshc

This example and the application works exactly as I want it to do in Chrome, but not in FF (16.0.2).

Paulie_D

If it's tabular data...use a table...but without seeing a mock-up of a finished page, I really have to throw my hands up and surrender.

I guess I need context to figure out what the hell is going on.

At the moment, frankly, I have no idea of what this is supposed to do or how it is supposed function....but good luck with it.

jocke76

I understand you Paulie! You've really helped me in the right directions, and for that I'm truly grateful.

I'm posting a screen shoot if you don't want to give up =) http://postimage.org/image/6v33u03el/full/ The image shows the correct layout .. If I resize the windows the layout inside the box totally crumbles. (http://postimage.org/image/71w8lbycp/)

Otherwise.. I'll just have to either change the design to use tables instead of ul/li or change the overflow of the closest div to auto/scroll and fixed width. That way it won't interfere with the rest of the design.

jocke76

Bah, Found the solution (again).

In the example I changed the follow in css for "ul.horz > li"

display: block; to display: inline-block;
float: left; (removed)

Now it works in FF too.

Paulie_D

Totally a table...

jocke76

=) 10 years ago I had tables for it .. Back then css wasn't invented, atleast afaik =) (Atleast it was a pain)

Then

<td width=100></td>

wasn't always 100px ,, it could be 120px aswell. Or maybe it was just my incompetens.. =)

jimmyniceguy

Always use tables for tabular data storage, it's not outdated and it will probably never be.

Make everything on purpose, as specific as it should be.

Responsive tables

Good example from Chris here, what you can achieve with tables. You do not need to style them in HTML, what is more - you SHOULD not. Using CSS, everything will line up perfectly, don't ever be afraid of tables - as long as you use it for data, not layout, of course.

Good luck!

AndyHowells

Tables are for tabular information, it's perfectly acceptable and semantic to use them for their intended purpose.

treehouse : what would you like to learn today?

Forums

[Solved] Keeping floats from wrapping inside undefined width div