[Solved] Trouble with float vertical alignment

[Kean]

First time posting here and first let me say a very VERY big thank you for this site. Not only the blog but everything I find here has been an invaluable resource. Much appreciated.

Completely unlike everyone else that has ever started working with floats, I am having some issues :) I have created a CodePen that describes the problem: http://codepen.io/jkj/pen/HxcdA.

[Edit: I changed the pen above to fix the collapsing container issue]

What I am trying to achieve is pretty simple: I want the product name, the stock on hand, and the customer name all to be aligned to the top of the product-entry block.

I have tried many different combinations of float, clear, display et. al. and I just can’t seem to figure it out. I have a feeling if you can help me with this it will be another one of those penny dropping “aha” moments with CSS for me. Thank you in advance for your time.

[MDMueller]

Something like this?

http://codepen.io/anon/pen/vhezD

[Kean]

Thank you for the speedy reply MDMueller.

The problem with that is it is aligning everything to the top. I really want the layout as specified in my original pen, i.e. with the name and the supplier and supplier phone number on the left, the customer and phone number on the right, and the stock in the middle of the two, but off to the right side of things (i.e just to the left of the customer thingy).

In my original example the layout is exactly as desired except that the customer name and the stock count are aligned with the name of the supplier, not with the product name, as desired. I fully recognise that I can add extra div containers to achieve the result I want, but I am trying to keep my HTML as “semantic” as possible. If there is no other way around it, I will just put the product name and supplier in a wrapping div and float it left, and the customer info and stock in a containing div and float it right. I would prefer not to do that however. I also know that I can use a negative margin-top on both the stock count and the client name and get the desired result. Again I would prefer not to do this unless I have no choice.

I guess what I am really trying to do is understand the box model / floats / positioning better. What I want to achieve may not be possible without negative margins or extra containers, which is fine, I just don’t want to resort to that out of ignorance of more elegant CSS-only solutions.

[Kean]

I guess I just didn’t play around enough (or was doing so in too-complex an environment) because hacking around on codepen I think I just stumbled on an almost-solution (after re-reading https://css-tricks.com/absolute-positioning-inside-relative-positioning/). Here’s a new pen that solves the problem for the most part using absolute positioning within the containing div: http://codepen.io/jkj/pen/eFwKL

The only issue I have with that solution is the right: 30%; to line up the stock count. Ideally, I would want that div to move with the customer info one (i.e not also require a top: 0 and not require the right: 30% but instead just float correctly). I think I am one step closer to the optimal solution however.

[Kean]

@Soronbe yup that achieves the desired effect exactly, but as I stated above I was trying to not introduce a new semantic element solely for the purposes of layout, which that solution does. If there’s no other way I will end up doing exactly that because I think its the cleanest, but I was hoping to avoid the extra div. Perhaps I am taking the whole “only be semantic” thing too far. I don’t know. It just “felt” like what I wanted to achieve should be possible with CSS and the HTML I have.

[Paulie_D]

I’m edging towards a table here…because it’s tabular data…or at least css tables

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

[Kean]

@Soronbe oh I like that second one! See this just goes to show why talking things over with smart people helps. I never even considered simply re-arranging the order of items in the HTML to help with layout! What a valuable lesson – thank you!

[Kean]

@Paulie_D yes the data is somewhat tabular in nature and I considered using a table but I’ve read so many posts where people seem to suffer from allergic reactions when tables are involved. I think tables are a fine construct if the data is actually tabular though.

In the actual application it is not as tabular, I simply made the shortest possible example of the problem I was facing, as instructed by the posting guidelines. In the actual web page I may be able to get away with simply re-ordering the items in the HTML as @Soronbe described, but that may also have challenges for small devices, where I display things differently due to the reduced screen real estate. I am playing with it now, and appreciate the response.

[Kean]

@wolfcry911 thank you that really is fantastic. Addressing a few things in your post. First about “semantic”. I guess I think of semantic as “style free” which is almost certainly an error in my thinking. I really like what you did with the HTML, it is much cleaner. I would however argue that if you think of a div as just a means of naming “stuff”, and the class names attached to the div are descriptive (or meaningful, or consistent, or all three) enough, that it qualifies as a certain type of semantic. Maybe not the way the term is used by others, but what I was mostly trying to achieve was a markup of the functional bits, and letting the CSS worry about rendering them and placing them.

Second, the layout. The pen I originally wrote was something I hacked up in CodePen to illustrate my intent, not the actual application. I find when I am trying to understand a concept, rather than trying to just solve a specific application bug, that it helps to frame things in a different context because it tends to eliminate assumptions. The actual application that this will be used on is a forum. The data along the top would be: topic name -> reply count -> name of last person who posted, and the second row would be the date the topic was created and by whom, and on the right (under the last person who posted) the date on which they did so. So in the actual application the layout makes sense (to my eyes at any rate).

Of course it is my hope that if I produce good enough HTML that I can give the HTML and my initial CSS design to an actual designer (which I am not, I am a C programmer) and have them make it look pretty. The thing that spits out the HTML is written in C so a real designer is probably not going to want to fiddle with that, and will just use CSS (although of course if they tell me that the HTML I am producing is hampering design I can of course change the app to emit different HTML).

Thank you very much for taking the time to respond, I appreciate it and you have given me things to think about.

[Author]

Posts