CODEWITHSUNDEEP
htmlcsscss-floatoverlapping
alexandroid
alexandroid

Reputation: 1638

CSS flexible elements layout: fixed left position but sink down to avoid overlapping?

I am trying to build a layout when I have a list of labels starting at some fixed percentage position, but I want them to push down on separate lines if page becomes narrow to avoid their overlap:

|        |<- 10%   |<-20%     |
label1   label2    label3

|    |    |    |
label1
     label2
          label3

So far I could not do that (tried floats, spacer divs, spans) and I begin to think that this may be impossible because of how the rendering flows.

Do you know if there is a solution, or what I could do otherwise? Here is my cleaned up jsfiddle template.

Upvotes: 1

Views: 262

Answers (2)

methodofaction
methodofaction

Reputation: 72405

The only way that occurs to me is with a media query. You would have to hardcode the specific screen with at which you want the "jump" to happen. I'm afraid there is no way to do this in a smart and automated way with CSS only.

@media only screen and (max-width: 35em) {
    .d2 {margin-top: 1em;}
    .d3 {margin-top: 2em;}
}

You can see an example here http://jsfiddle.net/wPrq8/

Upvotes: 2

ScottS
ScottS

Reputation: 72261

To get close to that behavior with pure css would require them to be floated. However, if your intent is to get them to all move down at once, then I have not yet found a way to make that happen.

Upvotes: 0

Related Questions