Removing Negative Margin


#82

Will

white-space: nowrap;

work with float:left?

http://jsfiddle.net/b053xm1s/13/


#83

If you use float correctly, you won't need the white-space: nowrap; rule.


#84

Really?


#85

Look at the code @PaulOB has already given you, using float. Do you see a white-space: nowrap; rule anywhere?


#86

No I don't
https://jsfiddle.net/uo92g07n/1/


#87

How would I add it to this correctly then?
http://jsfiddle.net/b053xm1s/11/


#88

Add what?


#89

float, you said it's wrong.


#90

Where did I say that?


#91

There.........


#92

How come this says:
https://jsfiddle.net/uo92g07n/1/

.links{
	width:270px;
}

When it measures in at

266px?

I don't understand that.


#93

That was a statement of fact, not a comment on your code.


#94

This still wraps with float added.
http://jsfiddle.net/b053xm1s/11/


#95

You have 5 blocks 50px wide - 250px and each of those has a 4px margin on the right - 20px. Total, 270px.


#96

How would I remove the margin off the last one?
https://jsfiddle.net/uo92g07n/3/

How would I get the red to be 266px?

Meaning, only a margin between the middle 4, not the end blocks?

I assume, this would be possible to achieve.
It's just figuring it out.


#97

You can use the nth-of-type selector to target every fifth link.

a:nth-of-type(5n+5) {margin-right: 0;}

That targets the fifth <a> element, and every fifth <a> thereafter.

You also need to set .links to 266px wide.


#98

What happened?
https://jsfiddle.net/uo92g07n/5/

Those 3 blocks are not supposed to be below.


#99

I can't check just at the moment, but I think you need to put this line:

a:nth-of-type(5n+5) {margin-right: 0;}

after

the .links a rules in your CSS.


#100

Using float:left; how is it achieved in this one without white-space:nowrap; being placed in the code??
https://jsfiddle.net/Lgrnraho/1/

no wrap being disabled?

How would I implement that with the playbutton code?
http://jsfiddle.net/b053xm1s/13/


#101

F

What has white-space: nowrap got to do with this? You only need it when you don’t want words or inline elements not to wrap.

I’m guessing you added it as a hack because your inline- block method was wrapping earlier than you wanted because you hadn’t taken care of the white space between and after inline and inline-block elements. Then you added another hack by adding an unneeded div to hold each 4 inline-block elements because they were not wrapping anymore

It’s just another example of why the method you chose was not the correct method in this case although you could beat it into submission.

I probably won’t be able to answer any more questions properly for a week or so as I am not at home and only have a mobile to type with.