[css-d] question re: vertical alignment of floated divs
Hi, I'll start by saying I don't yet have a site to post the html / css on to illustrate this, but I'm hoping it's a straightforward situation that doesn't require such. I have a container div and inside that I have 'rows' of fixed-size divs inside that container that are floated left. In order to get vertical alignment on the fixed-size divs inside the container div I am currently putting a negative top-margin on them. The left-most has 0em, next to the right has -1em, next to the right has -2em, etc.. I would like to have a container div that allows the number of fixed-size divs on each 'row' inside it grow or shrink based on available space. The need to put these negative margins on the inside fixed-size divs seems to preclude that. Is this just the nature of floats? If not, any words of wisdom or links to same would be much appreciated. TIA, Bill __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] question re: vertical alignment of floated divs
On 15.10.2011 18:06, Bill Walton wrote: I would like to have a container div that allows the number of fixed-size divs on each 'row' inside it grow or shrink based on available space. The need to put these negative margins on the inside fixed-size divs seems to preclude that. Is this just the nature of floats? No, it is not. Floats floated next to each other will naturally align vertically to the same line - no corrective top-margins needed. Unless you have made a coding-error something must be pushing down across the top of the container. Can't dissect your case based only on your description, but you should try floating the container div too as that will make it _contain_ its floated children and prevent the effect of collapsing margins on elements outside the container div from affecting elements inside it. Report back about the result, so we at least can figure out if we need to see your entire code or not. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
